您在制作樹時遇到錯誤：
.data( function(d) {return miniTree(d3.hierarchy(d.tree).descendants().slice(1)) })應該：
.data( function(d) {return miniTree(d3.hierarchy(d.tree)).descendants().slice(1) })你不想要 d3.hierarchy 的后代，但是 miniTree - 我第一次查看它時錯過了它。
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
var data = [
{name:"jackie chan", tree: {
"name": "Top Level",
"children": [
{ "name": "Fund 1" },
{ "name": "Fund 2" },
{ "name": "Fund 3"}
]
}},
{name:"jet li", tree: {
"name": "Top Level",
"children": [
{ "name": "Fund 1" },
{ "name": "Fund 2" },
{ "name": "Fund 3"},
{ "name": "Fund 4"},
]
}},
{name:"donnie yen", tree: {
"name": "Top Level",
"children": [
{ "name": "Fund 1" },
{ "name": "Fund 2" },
]
}},
{name:"chow yun fat", tree: {
"name": "Top Level",
"children": [
{ "name": "Fund 1" },
{ "name": "Fund 2" },
{ "name": "Fund 3"},
{ "name": "Fund 4"},
{ "name": "Fund 5"},
]
}},
];
//var formatComma = d3.format(",");
var columns = 3;
var spacing = 150;
var vSpacing = 180;
var pmG = graphGroup.selectAll('.pm')
.data(data)
.enter()
.append('g')
.attr('class', 'pm')
.attr('id', (d, i) => 'pm' + i)
.attr('transform', (d, k) => {
var horSpace = (k % columns) * spacing;
var vertSpace = ~~((k / columns)) * vSpacing;
return "translate(" + horSpace + "," + vertSpace + ")";
});
var miniTree = d3.tree()
.size([150, 75]);
pmG.append('rect')
.attr('x',0)
.attr('y',0)
.attr('width',100)
.attr('height',25)
.style('fill',"#003366");
pmG.append('text')
.attr('x',50)
.attr('y',-10)
.attr('text-anchor','middle')
.text(function(d) {return d.name});
pmG.selectAll(null)
.data( function(d) {
return miniTree(d3.hierarchy(d.tree)).descendants().slice(1)
})
.enter().append("path")
.attr("transform", "translate(-25,20)") // extra positioning.
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.x + "," + d.y
+ "C" + d.x + "," + (d.y + d.parent.y) / 2
+ " " + d.parent.x + "," + (d.y + d.parent.y) / 2
+ " " + d.parent.x + "," + d.parent.y;
});
pmG.selectAll(null)
.data( function(d) {return miniTree(d3.hierarchy(d.tree)).descendants() })
.enter().append("g")
.attr("class", function(d) {
return "node" +
(d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) {
return "translate(" + (d.x - 25) + "," + (d.y+20) + ")"; }) // with extra positioning.
.append("circle")
path {
stroke-width: 1px;
fill: none;
stroke: #003366;
}
circle {
r: 5px;
fill: #003366;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
