Question

我想使用像this，

这样的d3创建树视图

而不是圈子我想在那里放置一个矩形。但是当节点的子节点增加时，它们会相互重叠。

请查看示例here

有没有办法保持每个节点之间的最小距离。如果我增加全宽度我可以防止它重叠。但我也有宽度限制。我使用了以下代码，

＆＃13;

var SampleData= {name : "root",
  "children": [
    { "name" : "child2",
      "children": [
        {name : "child3",
		 "children": [
        {name : "child3",
		 size : 10
		},
        {name : "child4",
		 size : 10
		}],
		},
        {name : "child4",
		 size : 10
		}
      ]
    }
  ]
};

var root = SampleData;

var margin = {top: 100, right: 0, bottom: 100, left: 0},
		width =600 - margin.left - margin.right,
		height =  600 - margin.top - margin.bottom- 20;

	var svg = d3.select("body")
			.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var size= [width, height];

    // Compute the layout.
    var tree = d3.layout.tree().size(size),
        nodes = tree.nodes(root),
        links = tree.links(nodes);
	
	console.log(links[1].source);
		
	var x = function(d) { return d.x; },
		y = function(d) { return d.y; };
		
	var diagonal = d3.svg.diagonal()
		.source(function(d) { return {"x":d.source.x, "y":(d.source.y+100)}; })            
		.target(function(d) { return {"x":(d.target.x), "y":d.target.y}; })
		.projection(function(d) { return [d.x, d.y]; });

    // Create the link lines.
    svg.selectAll(".link")
        .data(links)
		.enter()
		.append("path")
        .attr("class", "link")
        .attr("d", diagonal);

	svg.selectAll(".node")
        .data(nodes)
		.enter().append("rect")
        .attr("class", "node")
        .attr("width", 200)
		.attr("height", 100)
        .attr("x", function(d){  return x(d)-100;})
        .attr("y", function(d){  return y(d);});

＆＃13;

.link {
  fill: none;
  stroke: RGB(128,128,128		);
  stroke-width: 10;
  opacity : 0.5;
}

.border {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #aaa;
}

.node {
  stroke: #fff;
  fill: steelblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<html>
    <body>
<script src="http://d3js.org/d3.v3.min.js"></script>
    </body>
</html>

＆＃13;

D3树视图 - 使用矩形而不是圆形

0 个答案: