Question

我使用以下代码创建了几个矩形并将它们放在一条水平线上：

 var nodeIcons = svg.selectAll(".node")
     .data(line.nodes)
     .enter().append("rect")
     .attr("x", screenWidth+100);

     lastX = 50;
     nodeIcons.transition().attr("x", function(d){
         lastX += 150;
         return lastX;
         }).duration(1000);

如您所见，矩形最初放置在屏幕左边缘的相同x坐标处，然后它们被动画到它们在线上的位置。

现在，如果我想将线路中的第一个节点向左移动一点，我会怎么称呼？

我试图围绕d3的基本原理，在这里，以及我主要询问的是如何选择线上的节点。

Answer 1

首先，您可能希望将已选择元素的类提供给创建的元素：

var nodeIcons = svg.selectAll(".node")
 .data(line.nodes)
 .enter().append("rect")
 .attr("class", "node")
 .attr("x", screenWidth+100);

要仅选择其中的第一个，您可以使用.selectAll()，然后在评论中指出选择索引，或者只使用svg.select(".node")，这将为您提供第一个元素匹配。

D3使用CSS选择器，当涉及到这样的事情时，它们非常灵活。例如，如果你想选择第4个元素，你可以这样做：

svg.select("rect:nth-child(4)");

通常，更好的方法是为元素分配ID，以便您可以明确地选择它们：

svg.append("rect").attr("id", "foo");

svg.select("#foo");

在d3中选择单个元素

1 个答案: