我为此使用 d3.v4 。当我有
var treemap = d3.tree().size([height, width])
这棵树很好地居中
但是（因为我想指定节点之间的垂直间距）当我将其更改为
var treemap = d3.tree().size([height, width]).nodeSize([40]);
树移动到左上角：
有谁知道为什么会发生这种情况？
我相信d3.tree().size() and d3.tree().nodeSize()彼此之间是排他的。设置其中之一会使另一个无效。 v3 文档 (here https://github.com/d3/d3-3.x-api-reference/blob/master/Tree-Layout.md#size）在这方面是明确的，而 v4 文档（here https://github.com/d3/d3-hierarchy/blob/master/README.md#tree）可能表明这仍然是正确的。快速测试表明 v4 在这方面与 v3 相同。 （也可以看看：这个答案 https://stackoverflow.com/questions/17558649/d3-tree-layout-separation-between-nodes-using-nodesize, or this one https://stackoverflow.com/questions/32839957/tree-nodesize-not-working-in-d3-tree-graph-to-inc-the-space-between-nodeshttp://.)
更重要的是，“当指定节点大小时，根节点始终位于 ⟨0, 0⟩”。 （API文档 https://github.com/d3/d3-hierarchy/blob/master/README.md#tree).
使用时size，每个节点的定位利用可用空间 - 相对于指定宽度/高度的定位，而不考虑节点密度。使用时nodeSize，定位是相对于其他节点的，而不是图表的可用区域（尽管它将锚定在 [0,0]）。通过最初使用.size，您不必担心定位问题。使用.nodeSize，您必须为节点设置变换，以便它们正确居中。
为了正确定位它，您需要在容器上设置一个变换，以便 [0,0] 和根节点放置得更合适（如下面的无边距示例，位于 [0,height/2 ]):
var data = { "name": "Parent", "children": [ { "name": "Child A", "children": [ { "name": "Grandchild" } ] }, { "name": "Child B", } ] };
var width = 500;
var height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g").attr('transform','translate(0,'+ (height/2) +')');
var root = d3.hierarchy(data);
var tree = d3.tree()
.nodeSize([width/2,height/2]);
var link = g.selectAll(".link")
.data(tree(root).links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 2.5);
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
svg {
background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
与自动间距相比d3.tree().size():
var data = { "name": "Parent", "children": [ { "name": "Child A", "children": [ { "name": "Grandchild" } ] }, { "name": "Child B", } ] };
var width = 500;
var height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var root = d3.hierarchy(data);
var tree = d3.tree()
.size([width,height]);
var link = g.selectAll(".link")
.data(tree(root).links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 2.5);
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
svg {
background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
