-
-
Save bjtucker/e47dfe3da0799d6d4093 to your computer and use it in GitHub Desktop.
Collapsible Indented Tree
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
| <!-- Created with Inkscape (http://www.inkscape.org/) --> | |
| <svg | |
| xmlns:dc="http://purl.org/dc/elements/1.1/" | |
| xmlns:cc="http://creativecommons.org/ns#" | |
| xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |
| xmlns:svg="http://www.w3.org/2000/svg" | |
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" | |
| xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |
| xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |
| width="64" | |
| height="64" | |
| id="svg2" | |
| version="1.1" | |
| inkscape:version="0.91 r13725" | |
| sodipodi:docname="folder.svg" | |
| inkscape:export-filename="/media/Data/Main/Visuals/Icons/Numix/Desktop/repos/numix-wiki/Gjorgi/Numix-folders/48/New/folder-144.png" | |
| inkscape:export-xdpi="270" | |
| inkscape:export-ydpi="270"> | |
| <defs | |
| id="defs4"> | |
| <radialGradient | |
| inkscape:collect="always" | |
| xlink:href="#linearGradient3958" | |
| id="radialGradient3964" | |
| cx="32.5" | |
| cy="56.5" | |
| fx="32.5" | |
| fy="56.5" | |
| r="33.5" | |
| gradientTransform="matrix(1,0,0,0.10447761,0,50.597015)" | |
| gradientUnits="userSpaceOnUse" /> | |
| <linearGradient | |
| inkscape:collect="always" | |
| id="linearGradient3958"> | |
| <stop | |
| style="stop-color:#000000;stop-opacity:1;" | |
| offset="0" | |
| id="stop3960" /> | |
| <stop | |
| style="stop-color:#000000;stop-opacity:0;" | |
| offset="1" | |
| id="stop3962" /> | |
| </linearGradient> | |
| <filter | |
| inkscape:collect="always" | |
| style="color-interpolation-filters:sRGB" | |
| id="filter4417" | |
| x="-0.018449999" | |
| width="1.0369" | |
| y="-0.73799998" | |
| height="2.4760001"> | |
| <feGaussianBlur | |
| inkscape:collect="always" | |
| stdDeviation="0.3075" | |
| id="feGaussianBlur4419" /> | |
| </filter> | |
| </defs> | |
| <sodipodi:namedview | |
| id="base" | |
| pagecolor="#ffffff" | |
| bordercolor="#666666" | |
| borderopacity="1.0" | |
| inkscape:pageopacity="0.0" | |
| inkscape:pageshadow="2" | |
| inkscape:zoom="2.8266384" | |
| inkscape:cx="22.860166" | |
| inkscape:cy="26.715703" | |
| inkscape:document-units="px" | |
| inkscape:current-layer="layer1" | |
| showgrid="true" | |
| inkscape:window-width="647" | |
| inkscape:window-height="714" | |
| inkscape:window-x="715" | |
| inkscape:window-y="24" | |
| inkscape:window-maximized="0" | |
| showguides="true" | |
| inkscape:guide-bbox="true"> | |
| <inkscape:grid | |
| type="xygrid" | |
| id="grid2985" | |
| empspacing="5" | |
| visible="true" | |
| enabled="true" | |
| snapvisiblegridlinesonly="true" /> | |
| </sodipodi:namedview> | |
| <metadata | |
| id="metadata7"> | |
| <rdf:RDF> | |
| <cc:Work | |
| rdf:about=""> | |
| <dc:format>image/svg+xml</dc:format> | |
| <dc:type | |
| rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |
| <dc:title></dc:title> | |
| </cc:Work> | |
| </rdf:RDF> | |
| </metadata> | |
| <g | |
| inkscape:label="Layer 1" | |
| inkscape:groupmode="layer" | |
| id="layer1" | |
| transform="translate(0,-988.3622)"> | |
| <g | |
| transform="matrix(1.409091,0,0,1.4391892,-1.8181819,985.03788)" | |
| id="g4480"> | |
| <g | |
| style="fill:#d0a15c;fill-opacity:1" | |
| id="g4468" | |
| transform="translate(-1.4903225e-6,-1.3896726)"> | |
| <rect | |
| style="fill:#d0a15c;fill-opacity:1" | |
| id="rect4470" | |
| width="14.193547" | |
| height="5" | |
| x="7.6774206" | |
| y="8.5633802" | |
| ry="2" /> | |
| <rect | |
| ry="2.0845075" | |
| y="10.647887" | |
| x="4.1290336" | |
| height="6.9483566" | |
| width="39.741932" | |
| id="rect4472" | |
| style="fill:#d0a15c;fill-opacity:1" /> | |
| <rect | |
| style="fill:#d0a15c;fill-opacity:1" | |
| id="rect4474" | |
| width="36.903221" | |
| height="5.5586858" | |
| x="5.5483885" | |
| y="12.037559" | |
| ry="2.0845075" /> | |
| <rect | |
| style="fill:#d0a15c;fill-opacity:1" | |
| id="rect4476" | |
| width="44" | |
| height="29.1831" | |
| x="2" | |
| y="14.8169" | |
| ry="2.0845084" /> | |
| <rect | |
| style="opacity:0.1;fill:#d0a15c;fill-opacity:1;filter:url(#filter4417)" | |
| id="rect4478" | |
| width="40" | |
| height="1" | |
| x="4" | |
| y="13" | |
| ry="0" | |
| transform="matrix(0.96349486,0,0,1.0157945,0.76751525,0.59577865)" /> | |
| </g> | |
| <g | |
| transform="translate(-1.4903225e-6,-2.0845083)" | |
| id="g4442"> | |
| <rect | |
| ry="2" | |
| y="8.5633802" | |
| x="7.6774206" | |
| height="5" | |
| width="14.193547" | |
| id="rect3537" | |
| style="fill:#d0a15c;fill-opacity:1" /> | |
| <rect | |
| style="fill:#d0a15c;fill-opacity:1" | |
| id="rect3535" | |
| width="39.741932" | |
| height="6.9483566" | |
| x="4.1290336" | |
| y="10.647887" | |
| ry="2.0845075" /> | |
| <rect | |
| ry="1.8239439" | |
| y="12.732394" | |
| x="6.2580657" | |
| height="4.8638496" | |
| width="35.483868" | |
| id="rect4421" | |
| style="fill:#ffffff;fill-opacity:1" /> | |
| <rect | |
| ry="2.0845084" | |
| y="14.8169" | |
| x="2" | |
| height="29.1831" | |
| width="44" | |
| id="rect3525" | |
| style="fill:#f4be70;fill-opacity:1" /> | |
| <rect | |
| transform="matrix(0.96349486,0,0,1.0157945,0.76751525,0.59577865)" | |
| ry="0" | |
| y="13" | |
| x="4" | |
| height="1" | |
| width="40" | |
| id="rect3539" | |
| style="opacity:0.1;fill:#000000;fill-opacity:1;filter:url(#filter4417)" /> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "flare", | |
| "children": [ | |
| { | |
| "name": "analytics", | |
| "children": [ | |
| { | |
| "name": "cluster", | |
| "children": [ | |
| {"name": "AgglomerativeCluster", "size": 3938, "icon": "application-images.svg"}, | |
| {"name": "CommunityStructure", "size": 3812, "icon": "application-images.svg"}, | |
| {"name": "HierarchicalCluster", "size": 6714}, | |
| {"name": "MergeEdge", "size": 743} | |
| ] | |
| }, | |
| { | |
| "name": "graph", | |
| "children": [ | |
| {"name": "BetweennessCentrality", "size": 3534}, | |
| {"name": "LinkDistance", "size": 5731}, | |
| {"name": "MaxFlowMinCut", "size": 7840}, | |
| {"name": "ShortestPaths", "size": 5914}, | |
| {"name": "SpanningTree", "size": 3416} | |
| ] | |
| }, | |
| { | |
| "name": "optimization", | |
| "children": [ | |
| {"name": "AspectRatioBanker", "size": 7074} | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "animate", | |
| "children": [ | |
| {"name": "Easing", "size": 17010}, | |
| {"name": "FunctionSequence", "size": 5842}, | |
| { | |
| "name": "interpolate", | |
| "children": [ | |
| {"name": "ArrayInterpolator", "size": 1983}, | |
| {"name": "ColorInterpolator", "size": 2047}, | |
| {"name": "DateInterpolator", "size": 1375}, | |
| {"name": "Interpolator", "size": 8746}, | |
| {"name": "MatrixInterpolator", "size": 2202}, | |
| {"name": "NumberInterpolator", "size": 1382}, | |
| {"name": "ObjectInterpolator", "size": 1629}, | |
| {"name": "PointInterpolator", "size": 1675}, | |
| {"name": "RectangleInterpolator", "size": 2042} | |
| ] | |
| }, | |
| {"name": "ISchedulable", "size": 1041}, | |
| {"name": "Parallel", "size": 5176}, | |
| {"name": "Pause", "size": 449}, | |
| {"name": "Scheduler", "size": 5593}, | |
| {"name": "Sequence", "size": 5534}, | |
| {"name": "Transition", "size": 9201}, | |
| {"name": "Transitioner", "size": 19975}, | |
| {"name": "TransitionEvent", "size": 1116}, | |
| {"name": "Tween", "size": 6006} | |
| ] | |
| }, | |
| { | |
| "name": "data", | |
| "children": [ | |
| { | |
| "name": "converters", | |
| "children": [ | |
| {"name": "Converters", "size": 721}, | |
| {"name": "DelimitedTextConverter", "size": 4294}, | |
| {"name": "GraphMLConverter", "size": 9800}, | |
| {"name": "IDataConverter", "size": 1314}, | |
| {"name": "JSONConverter", "size": 2220} | |
| ] | |
| }, | |
| {"name": "DataField", "size": 1759}, | |
| {"name": "DataSchema", "size": 2165}, | |
| {"name": "DataSet", "size": 586}, | |
| {"name": "DataSource", "size": 3331}, | |
| {"name": "DataTable", "size": 772}, | |
| {"name": "DataUtil", "size": 3322} | |
| ] | |
| }, | |
| { | |
| "name": "display", | |
| "children": [ | |
| {"name": "DirtySprite", "size": 8833}, | |
| {"name": "LineSprite", "size": 1732}, | |
| {"name": "RectSprite", "size": 3623}, | |
| {"name": "TextSprite", "size": 10066} | |
| ] | |
| }, | |
| { | |
| "name": "flex", | |
| "children": [ | |
| {"name": "FlareVis", "size": 4116} | |
| ] | |
| }, | |
| { | |
| "name": "physics", | |
| "children": [ | |
| {"name": "DragForce", "size": 1082}, | |
| {"name": "GravityForce", "size": 1336}, | |
| {"name": "IForce", "size": 319}, | |
| {"name": "NBodyForce", "size": 10498}, | |
| {"name": "Particle", "size": 2822}, | |
| {"name": "Simulation", "size": 9983}, | |
| {"name": "Spring", "size": 2213}, | |
| {"name": "SpringForce", "size": 1681} | |
| ] | |
| }, | |
| { | |
| "name": "query", | |
| "children": [ | |
| {"name": "AggregateExpression", "size": 1616}, | |
| {"name": "And", "size": 1027}, | |
| {"name": "Arithmetic", "size": 3891}, | |
| {"name": "Average", "size": 891}, | |
| {"name": "BinaryExpression", "size": 2893}, | |
| {"name": "Comparison", "size": 5103}, | |
| {"name": "CompositeExpression", "size": 3677}, | |
| {"name": "Count", "size": 781}, | |
| {"name": "DateUtil", "size": 4141}, | |
| {"name": "Distinct", "size": 933}, | |
| {"name": "Expression", "size": 5130}, | |
| {"name": "ExpressionIterator", "size": 3617}, | |
| {"name": "Fn", "size": 3240}, | |
| {"name": "If", "size": 2732}, | |
| {"name": "IsA", "size": 2039}, | |
| {"name": "Literal", "size": 1214}, | |
| {"name": "Match", "size": 3748}, | |
| {"name": "Maximum", "size": 843}, | |
| { | |
| "name": "methods", | |
| "children": [ | |
| {"name": "add", "size": 593}, | |
| {"name": "and", "size": 330}, | |
| {"name": "average", "size": 287}, | |
| {"name": "count", "size": 277}, | |
| {"name": "distinct", "size": 292}, | |
| {"name": "div", "size": 595}, | |
| {"name": "eq", "size": 594}, | |
| {"name": "fn", "size": 460}, | |
| {"name": "gt", "size": 603}, | |
| {"name": "gte", "size": 625}, | |
| {"name": "iff", "size": 748}, | |
| {"name": "isa", "size": 461}, | |
| {"name": "lt", "size": 597}, | |
| {"name": "lte", "size": 619}, | |
| {"name": "max", "size": 283}, | |
| {"name": "min", "size": 283}, | |
| {"name": "mod", "size": 591}, | |
| {"name": "mul", "size": 603}, | |
| {"name": "neq", "size": 599}, | |
| {"name": "not", "size": 386}, | |
| {"name": "or", "size": 323}, | |
| {"name": "orderby", "size": 307}, | |
| {"name": "range", "size": 772}, | |
| {"name": "select", "size": 296}, | |
| {"name": "stddev", "size": 363}, | |
| {"name": "sub", "size": 600}, | |
| {"name": "sum", "size": 280}, | |
| {"name": "update", "size": 307}, | |
| {"name": "variance", "size": 335}, | |
| {"name": "where", "size": 299}, | |
| {"name": "xor", "size": 354}, | |
| {"name": "_", "size": 264} | |
| ] | |
| }, | |
| {"name": "Minimum", "size": 843}, | |
| {"name": "Not", "size": 1554}, | |
| {"name": "Or", "size": 970}, | |
| {"name": "Query", "size": 13896}, | |
| {"name": "Range", "size": 1594}, | |
| {"name": "StringUtil", "size": 4130}, | |
| {"name": "Sum", "size": 791}, | |
| {"name": "Variable", "size": 1124}, | |
| {"name": "Variance", "size": 1876}, | |
| {"name": "Xor", "size": 1101} | |
| ] | |
| }, | |
| { | |
| "name": "scale", | |
| "children": [ | |
| {"name": "IScaleMap", "size": 2105}, | |
| {"name": "LinearScale", "size": 1316}, | |
| {"name": "LogScale", "size": 3151}, | |
| {"name": "OrdinalScale", "size": 3770}, | |
| {"name": "QuantileScale", "size": 2435}, | |
| {"name": "QuantitativeScale", "size": 4839}, | |
| {"name": "RootScale", "size": 1756}, | |
| {"name": "Scale", "size": 4268}, | |
| {"name": "ScaleType", "size": 1821}, | |
| {"name": "TimeScale", "size": 5833} | |
| ] | |
| }, | |
| { | |
| "name": "util", | |
| "children": [ | |
| {"name": "Arrays", "size": 8258}, | |
| {"name": "Colors", "size": 10001}, | |
| {"name": "Dates", "size": 8217}, | |
| {"name": "Displays", "size": 12555}, | |
| {"name": "Filter", "size": 2324}, | |
| {"name": "Geometry", "size": 10993}, | |
| { | |
| "name": "heap", | |
| "children": [ | |
| {"name": "FibonacciHeap", "size": 9354}, | |
| {"name": "HeapNode", "size": 1233} | |
| ] | |
| }, | |
| {"name": "IEvaluable", "size": 335}, | |
| {"name": "IPredicate", "size": 383}, | |
| {"name": "IValueProxy", "size": 874}, | |
| { | |
| "name": "math", | |
| "children": [ | |
| {"name": "DenseMatrix", "size": 3165}, | |
| {"name": "IMatrix", "size": 2815}, | |
| {"name": "SparseMatrix", "size": 3366} | |
| ] | |
| }, | |
| {"name": "Maths", "size": 17705}, | |
| {"name": "Orientation", "size": 1486}, | |
| { | |
| "name": "palette", | |
| "children": [ | |
| {"name": "ColorPalette", "size": 6367}, | |
| {"name": "Palette", "size": 1229}, | |
| {"name": "ShapePalette", "size": 2059}, | |
| {"name": "SizePalette", "size": 2291} | |
| ] | |
| }, | |
| {"name": "Property", "size": 5559}, | |
| {"name": "Shapes", "size": 19118}, | |
| {"name": "Sort", "size": 6887}, | |
| {"name": "Stats", "size": 6557}, | |
| {"name": "Strings", "size": 22026} | |
| ] | |
| }, | |
| { | |
| "name": "vis", | |
| "children": [ | |
| { | |
| "name": "axis", | |
| "children": [ | |
| {"name": "Axes", "size": 1302}, | |
| {"name": "Axis", "size": 24593}, | |
| {"name": "AxisGridLine", "size": 652}, | |
| {"name": "AxisLabel", "size": 636}, | |
| {"name": "CartesianAxes", "size": 6703} | |
| ] | |
| }, | |
| { | |
| "name": "controls", | |
| "children": [ | |
| {"name": "AnchorControl", "size": 2138}, | |
| {"name": "ClickControl", "size": 3824}, | |
| {"name": "Control", "size": 1353}, | |
| {"name": "ControlList", "size": 4665}, | |
| {"name": "DragControl", "size": 2649}, | |
| {"name": "ExpandControl", "size": 2832}, | |
| {"name": "HoverControl", "size": 4896}, | |
| {"name": "IControl", "size": 763}, | |
| {"name": "PanZoomControl", "size": 5222}, | |
| {"name": "SelectionControl", "size": 7862}, | |
| {"name": "TooltipControl", "size": 8435} | |
| ] | |
| }, | |
| { | |
| "name": "data", | |
| "children": [ | |
| {"name": "Data", "size": 20544}, | |
| {"name": "DataList", "size": 19788}, | |
| {"name": "DataSprite", "size": 10349}, | |
| {"name": "EdgeSprite", "size": 3301}, | |
| {"name": "NodeSprite", "size": 19382}, | |
| { | |
| "name": "render", | |
| "children": [ | |
| {"name": "ArrowType", "size": 698}, | |
| {"name": "EdgeRenderer", "size": 5569}, | |
| {"name": "IRenderer", "size": 353}, | |
| {"name": "ShapeRenderer", "size": 2247} | |
| ] | |
| }, | |
| {"name": "ScaleBinding", "size": 11275}, | |
| {"name": "Tree", "size": 7147}, | |
| {"name": "TreeBuilder", "size": 9930} | |
| ] | |
| }, | |
| { | |
| "name": "events", | |
| "children": [ | |
| {"name": "DataEvent", "size": 2313}, | |
| {"name": "SelectionEvent", "size": 1880}, | |
| {"name": "TooltipEvent", "size": 1701}, | |
| {"name": "VisualizationEvent", "size": 1117} | |
| ] | |
| }, | |
| { | |
| "name": "legend", | |
| "children": [ | |
| {"name": "Legend", "size": 20859}, | |
| {"name": "LegendItem", "size": 4614}, | |
| {"name": "LegendRange", "size": 10530} | |
| ] | |
| }, | |
| { | |
| "name": "operator", | |
| "children": [ | |
| { | |
| "name": "distortion", | |
| "children": [ | |
| {"name": "BifocalDistortion", "size": 4461}, | |
| {"name": "Distortion", "size": 6314}, | |
| {"name": "FisheyeDistortion", "size": 3444} | |
| ] | |
| }, | |
| { | |
| "name": "encoder", | |
| "children": [ | |
| {"name": "ColorEncoder", "size": 3179}, | |
| {"name": "Encoder", "size": 4060}, | |
| {"name": "PropertyEncoder", "size": 4138}, | |
| {"name": "ShapeEncoder", "size": 1690}, | |
| {"name": "SizeEncoder", "size": 1830} | |
| ] | |
| }, | |
| { | |
| "name": "filter", | |
| "children": [ | |
| {"name": "FisheyeTreeFilter", "size": 5219}, | |
| {"name": "GraphDistanceFilter", "size": 3165}, | |
| {"name": "VisibilityFilter", "size": 3509} | |
| ] | |
| }, | |
| {"name": "IOperator", "size": 1286}, | |
| { | |
| "name": "label", | |
| "children": [ | |
| {"name": "Labeler", "size": 9956}, | |
| {"name": "RadialLabeler", "size": 3899}, | |
| {"name": "StackedAreaLabeler", "size": 3202} | |
| ] | |
| }, | |
| { | |
| "name": "layout", | |
| "children": [ | |
| {"name": "AxisLayout", "size": 6725}, | |
| {"name": "BundledEdgeRouter", "size": 3727}, | |
| {"name": "CircleLayout", "size": 9317}, | |
| {"name": "CirclePackingLayout", "size": 12003}, | |
| {"name": "DendrogramLayout", "size": 4853}, | |
| {"name": "ForceDirectedLayout", "size": 8411}, | |
| {"name": "IcicleTreeLayout", "size": 4864}, | |
| {"name": "IndentedTreeLayout", "size": 3174}, | |
| {"name": "Layout", "size": 7881}, | |
| {"name": "NodeLinkTreeLayout", "size": 12870}, | |
| {"name": "PieLayout", "size": 2728}, | |
| {"name": "RadialTreeLayout", "size": 12348}, | |
| {"name": "RandomLayout", "size": 870}, | |
| {"name": "StackedAreaLayout", "size": 9121}, | |
| {"name": "TreeMapLayout", "size": 9191} | |
| ] | |
| }, | |
| {"name": "Operator", "size": 2490}, | |
| {"name": "OperatorList", "size": 5248}, | |
| {"name": "OperatorSequence", "size": 4190}, | |
| {"name": "OperatorSwitch", "size": 2581}, | |
| {"name": "SortOperator", "size": 2023} | |
| ] | |
| }, | |
| {"name": "Visualization", "size": 16540} | |
| ] | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node rect { | |
| cursor: pointer; | |
| fill: #fff; | |
| fill-opacity: 0; | |
| // stroke: #3182bd; | |
| stroke-width: 1.5px; | |
| stroke-opacity: 1; | |
| } | |
| .node text { | |
| font: 10px sans-serif; | |
| cursor: pointer; | |
| } | |
| path.link { | |
| fill: none; | |
| stroke: #9ecae1; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script> | |
| var margin = {top: 30, right: 20, bottom: 30, left: 20}, | |
| width = 960 - margin.left - margin.right, | |
| barHeight = 20, | |
| barWidth = 20; | |
| var i = 0, | |
| duration = 400, | |
| root; | |
| var tree = d3.layout.tree() | |
| .nodeSize([0, 20]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.json("flare.json", function(error, flare) { | |
| if (error) throw error; | |
| flare.x0 = 0; | |
| flare.y0 = 0; | |
| update(root = flare); | |
| }); | |
| function update(source) { | |
| // Compute the flattened node list. TODO use d3.layout.hierarchy. | |
| var nodes = tree.nodes(root); | |
| var height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom); | |
| d3.select("svg").transition() | |
| .duration(duration) | |
| .attr("height", height); | |
| d3.select(self.frameElement).transition() | |
| .duration(duration) | |
| .style("height", height + "px"); | |
| // Compute the "layout". | |
| nodes.forEach(function(n, i) { | |
| n.x = i * barHeight; | |
| }); | |
| var myNext=d3.nest() | |
| .key(function(d) { return d.id || (d.id = ++i); }); | |
| // Update the nodes… | |
| var node = svg.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
| var nodeEnter = node.enter() | |
| .append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) | |
| .style("opacity", 1e-6); | |
| // Enter any new nodes at the parent's previous position. | |
| // nodeEnter.append("circle") | |
| // .attr("cx", 10) | |
| // .attr("cy", 0) | |
| // .attr("r", 2); | |
| nodeEnter.append("image") | |
| // .attr("xlink:href", function(d) { var icon = d.icon; if (icon==null) {icon = ""} return icon; }) | |
| .attr("xlink:href", iconF) | |
| .attr("x", 2) | |
| .attr("y", -8) | |
| .attr("width", "16px") | |
| .attr("height", "16px"); | |
| nodeEnter.append("rect") | |
| .attr("y", -barHeight / 2) | |
| .attr("height", barHeight) | |
| .attr("width", barWidth) | |
| .on("click", click); | |
| // text rectangle. gives somewhere to click if text is empty. | |
| nodeEnter.append("rect") | |
| .attr("y", -barHeight / 2) | |
| .attr("x", barWidth) | |
| .attr("height", barHeight) | |
| .attr("width", barWidth) | |
| .on("click", clickText); | |
| nodeEnter.append("text"); | |
| var myText = d3.selectAll("text") | |
| .attr("dy", 3.5) | |
| .attr("dx", 25.5) | |
| .text(function(d) { return d.name; }) | |
| // .on("click", clickText); | |
| .call(make_editable, "name"); | |
| // Transition nodes to their new position. | |
| node.transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) | |
| .style("opacity", 1) | |
| // Transition exiting nodes to the parent's new position. | |
| node.exit().transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) | |
| .style("opacity", 1e-6) | |
| .remove(); | |
| // Update the links… | |
| var link = svg.selectAll("path.link") | |
| .data(tree.links(nodes), function(d) { return d.target.id; }); | |
| // Enter any new links at the parent's previous position. | |
| link.enter().insert("path", "g") | |
| .attr("class", "link") | |
| .attr("d", function(d) { | |
| var o = {x: source.x0, y: source.y0}; | |
| return diagonal({source: o, target: o}); | |
| }) | |
| .transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition links to their new position. | |
| link.transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition exiting nodes to the parent's new position. | |
| link.exit().transition() | |
| .duration(duration) | |
| .attr("d", function(d) { | |
| var o = {x: source.x, y: source.y}; | |
| return diagonal({source: o, target: o}); | |
| }) | |
| .remove(); | |
| // Stash the old positions for transition. | |
| nodes.forEach(function(d) { | |
| d.x0 = d.x; | |
| d.y0 = d.y; | |
| }); | |
| } | |
| // Toggle children on click. | |
| function click(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d.children = null; | |
| } else { | |
| d.children = d._children; | |
| d._children = null; | |
| } | |
| update(d); | |
| } | |
| function clickText(d) { | |
| d.name = 'xxxxx' | |
| update(d.name); | |
| } | |
| function iconF(d) { | |
| var icon | |
| if (d.icon) { | |
| icon = d.icon | |
| } else if (d.children){ | |
| icon="default-folder.svg" | |
| } else { | |
| icon="default-document.svg" | |
| } | |
| // return d.children ? "default-folder.svg" : ""; | |
| return icon | |
| return | |
| } | |
| function make_editable(d, field) | |
| { | |
| console.log("make_editable", arguments); | |
| this | |
| .on("mouseover", function() { | |
| d3.select(this).style("fill", "red"); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select(this).style("fill", null); | |
| }) | |
| .on("click", function(d) { | |
| var p = this.parentNode; | |
| console.log(this, arguments); | |
| // inject a HTML form to edit the content here... | |
| // bug in the getBBox logic here, but don't know what I've done wrong here; | |
| // anyhow, the coordinates are completely off & wrong. :-(( | |
| var xy = this.getBBox(); | |
| var p_xy = p.getBBox(); | |
| //xy.x -= p_xy.x; | |
| //xy.y -= p_xy.y; | |
| var el = d3.select(this); | |
| var p_el = d3.select(p); | |
| var frm = p_el.append("foreignObject"); | |
| var inp = frm | |
| .attr("x", xy.x) | |
| .attr("y", xy.y) | |
| .attr("width", 300) | |
| .attr("height", 25) | |
| .append("xhtml:form") | |
| .append("input") | |
| .attr("value", function() { | |
| // nasty spot to place this call, but here we are sure that the <input> tag is available | |
| // and is handily pointed at by 'this': | |
| this.focus(); | |
| return d[field]; | |
| }) | |
| .attr("style", "width: 294px;") | |
| // make the form go away when you jump out (form looses focus) or hit ENTER: | |
| .on("blur", function() { | |
| console.log("blur", this, arguments); | |
| var txt = inp.node().value; | |
| d[field] = txt; | |
| el | |
| .text(function(d) { return d[field]; }); | |
| // Note to self: frm.remove() will remove the entire <g> group! Remember the D3 selection logic! | |
| p_el.select("foreignObject").remove(); | |
| }) | |
| .on("keypress", function() { | |
| console.log("keypress", this, arguments); | |
| // IE fix | |
| if (!d3.event) | |
| d3.event = window.event; | |
| var e = d3.event; | |
| if (e.keyCode == 13) | |
| { | |
| if (typeof(e.cancelBubble) !== 'undefined') // IE | |
| e.cancelBubble = true; | |
| if (e.stopPropagation) | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| var txt = inp.node().value; | |
| d[field] = txt; | |
| el | |
| .text(function(d) { return d[field]; }); | |
| // odd. Should work in Safari, but the debugger crashes on this instead. | |
| // Anyway, it SHOULD be here and it doesn't hurt otherwise. | |
| p_el.select("foreignObject").remove(); | |
| } | |
| }); | |
| }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment