大型树d3 v4中的重叠节点

Question

I have built a simple tree with sample flare data. However, this tree does not fit into my svg and all the nodes overlap with each other as shown in the demo. Is there any way to fix this problem of overlapping child nodes in a given SVG canvas width and height? I tried with separation as given in here however it did not work. And I do not know how to fix this in d3 v4.

 var data={ "name": "flare", "children": [ { "name": "analytics", "children": [ { "name": "cluster", "children": [ {"name": "AgglomerativeCluster", "size": 3938}, {"name": "CommunityStructure", "size": 3812}, {"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} ] } ] } var margin = {top: 20, right: 90, bottom: 30, left: 90}, width = 1060 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select("#tree_container"). append("svg"). attr("width", width + margin.right + margin.left). attr("height", height + margin.top + margin.bottom).call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })) .append("g"). attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var i = 0, duration = 500, root; var panSpeed = 200; var panBoundary = 20; var treemap = d3.tree(). size([height, width]).separation(function separation(a, b) { return a.parent == b.parent ? 2 : 2; }); root = d3.hierarchy(data, function(d) { return d.children; }); root.x0 = height / 2; root.y0 = 0; update(root,svg,root); //create zoom handler //specify what to do when zoom event listener is triggered //add zoom behaviour to the svg element backing our graph. //same thing as svg.call(zoom_handler); function update(source,svg,root) { // Assigns the x and y position for the nodes var treeData = treemap(root); //console.log(treeData) // Compute the new tree layout. var nodes = treeData.descendants(), links = treeData.descendants().slice(1); nodes.forEach(function(d){ if (d.parent!=null){ d.depth = d.parent.depth+1 d.height=d.parent.height-1; } }); // Normalize for fixed-depth. nodes.forEach(function(d){ dy = d.depth * 180 }); // ### LINKS // Update the links... var link = svg.selectAll('line.link'). data(links, function(d) { return d.id; }); // Enter any new links at the parent's previous position. var linkEnter = link.enter().insert('path', "g") .attr("class", "link") .attr('d', function(d){ var o = {x: source.y, y: source.x} return diagonal(o, o) }); // UPDATE var linkUpdate = linkEnter.merge(link); linkUpdate.transition() .duration(duration) .attr('d', function(d){ return diagonal(d, d.parent) }); // Remove any exiting links var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = {x: source.y, y: source.x} return diagonal(o, o) }) .remove(); // Store the old positions for transition. // ### CIRCLES // Update the nodes... node = svg.selectAll('g.node') .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new modes at the parent's previous position. var nodeEnter = node.enter(). append('g'). attr('class', 'node'). attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) // Add Circle for the nodes nodeEnter.append('circle'). attr('class', 'node'). attr('r', 10). style("fill", function(d) { return "#0e4677"; }); nodeEnter.append("text") .attr("dx", ".60em") .attr("x", function(d) { return d.children ? -30 : 30; }) .style("text-anchor", "middle") .text(function(d) { return d.data.name; }); // Update var nodeUpdate = nodeEnter.merge(node); // Transition to the proper position for the node nodeUpdate.transition(). duration(duration). attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; }); // Update the node attributes and style nodeUpdate.select('circle.node'). attr('r', 10). style("fill", function(d) { return "#0e4677"; }). attr('cursor', 'pointer'); // Remove any exiting nodes var nodeExit = node.exit(). transition(). duration(duration). attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }). remove(); // On exit reduce the node circles size to 0 nodeExit.select('circle').attr('r', 0); // Store the old positions for transition. nodes.forEach(function(d){ d.x0 = dx; d.y0 = dy; }); } function diagonal(s, d) { path = `M ${sy} ${sx} C ${(sy + dy)/2} ${sx}, ${(sy + dy) / 2} ${dx}, ${dy} ${dx}` return path } 

 .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .fadedCircle{ display: none; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } .container { width: 100%; height: 600px; margin: auto; padding: 10px; } .tree { width: 75%; height: 600px; float: left; } .recomwindow { width: 25%; height: 600px; float: right; } .dialogbox { background-color: lightgrey; width: 300px; border: 2px solid #0d0d0d; font-family: Arial; margin-top: 100px; margin-right: 50px; background:#fff; } #dialogbox1{ display: none; } #dialogbox2{ display: none; } #dialogbox3{ display: none; } .dialogtitle{ text-align: center; width: 300px; height: 25px; background-color: #CCCCCC; padding-top: 4px; } .dialogbody{ text-align: center; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; background: #fff; } .xbutton{ float:right; display:inline-block; padding:2px 5px; background:#ccc; } .xbutton:hover { float:right; display:inline-block; padding:2px 5px; background:#ccc; color:#fff; } 

 <!DOCTYPE html> <meta charset="UTF-8"> <!DOCTYPE html> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> <script src="https://d3js.org/d3-path.v1.min.js"></script> <script src="https://d3js.org/d3-shape.v1.min.js"></script> <script src="https://d3js.org/d3-dispatch.v1.min.js"></script> <body> <div class="container"> <div class="recomwindow" id="recom_container"> <div class="dialogbox" id="dialogbox1" > <div class="dialogtitle" id="dTitle"> How to interact nodes? <input type="button" class ="xbutton" id="xbutton" value="X" onclick="windowClose();"></div> <div class ="dialogbody" id="dBody"> <button type="button" class="choice" id="duplicatenodes" ">Copy node in each branch</button> <button type="button" class="choice" id="mergenodes" ">Merge with this node in dropping point</button> </div> </div> <div class="dialogbox" id="dialogbox2" > <div class="dialogtitle" id="dTitle"> How to interact nodes? <input type="button" class ="xbutton" id="xbutton2" value="X" onclick="windowClose();"></div> <div class ="dialogbody" id="dBody"> <button type="button" class="choice" id="mergenodes2" ">Merge with this node in dropping point</button> </div> </div> <div class="dialogbox" id="dialogbox3" > <div class="dialogtitle" id="dTitle"> How to interact node and link? <input type="button" class ="xbutton" id="xbutton3" value="X" onclick="windowClose();"></div> <div class ="dialogbody" id="dBody"> </div> </div> </div> <div class="tree" id= "tree_container"> <script src="main.js"></script> </div> </div> </body> 

Please note that svg canvas should be the same size as intended as I reserve the 25 percent of the width to other purposes.

Answer 1

You have to render the tree on a larger area 10*height

var treemap = d3.tree()
  .size([10*height, width])
  .separation(function separation(a, b) { return a.parent == b.parent ? 2 : 2; });

Then set the zoom to an initial scale of 0.1 .

Change your code because you use the same trap as How can I avoid d3.zoom translate on first zoom or pan?

Your HTML is not valid. Use a syntax highlighted editor.