d3.js 什么时候在d3的.data节中做切片与非切片?

gj3fmq9x  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(128)

我有一个能画出直线和圆圈的代码。
我知道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);
mkshixfv

mkshixfv1#

我认为您正在将descendants()d3.hierarchy一起使用-请注意,在下面的控制台输出中,Eve没有父节点,因为它是“根”节点,而descendants()数组中的所有其他节点都有父节点。
第一个
然后注意d函数:

.attr("d", function(d)
{
  return "M" + d.x + "," + d.y
  + "L" + d.parent.x + "," + d.parent.y;
});

它表示M在'子'圆的中心上方,并将L画到'父'圆的中间。因为您的'根'节点(Eve)没有父节点,则应从链接布局中消除此节点,因此为slice(1)。但是因为所有其他节点都应该连接到Eve,所以这个根节点不是slice d:

var node = g.selectAll(".node")
  .data(nodes.descendants())

为了画出Eve节点的圆,因此来自Eve的子节点的链接可以连接到某个东西。

相关问题