我有一个能画出直线和圆圈的代码。
我知道slice
在下面做什么。但是我们什么时候在.data
节中使用slice
与非切片方式的变量?
var link = g.selectAll(".link")
.data(nodes.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.style("stroke", function(d) { return d.data.level;})
.attr("d", function(d)
{
return "M" + d.x + "," + d.y
+ "L" + d.parent.x + "," + d.parent.y;
});
var node = g.selectAll(".node")
.data(nodes.descendants())
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d)
{
return "translate(" + d.x + "," + d.y + ")";
});
var circle = node.append("circle").attr("r",30);
1条答案
按热度按时间mkshixfv1#
我认为您正在将
descendants()
与d3.hierarchy
一起使用-请注意,在下面的控制台输出中,Eve
没有父节点,因为它是“根”节点,而descendants()
数组中的所有其他节点都有父节点。第一个
然后注意
d
函数:它表示
M
在'子'圆的中心上方,并将L
画到'父'圆的中间。因为您的'根'节点(Eve
)没有父节点,则应从链接布局中消除此节点,因此为slice(1)
。但是因为所有其他节点都应该连接到Eve
,所以这个根节点不是slice
d:为了画出
Eve
节点的圆,因此来自Eve
的子节点的链接可以连接到某个东西。