D3.js d3js：如何选择组的第n个元素？

我创建了一个包含9个元素（圆）的组，例如：

// JS
var data=[ 1,2,3,4,5,6,7,8,9 ];
var svg = d3.select("body").append("svg");
var circles = svg.append("g").attr("id", "groupOfCircles")
    .selectAll("circle")
        .data(data)
    .enter().append("circle")
        .attr("cx", function(d){ return d*20;})
        .attr("cy", function(d){ return d*10;})
        .attr("r" , function(d){ return d;})
        .attr("fill","green");

---

选择器需要是

圆圈：第n个子元素（3）

--子元素

表示元素是第n个子元素，而不是选择元素的第n个子元素（请参见）

您还可以使用：


//JS
var数据=[1,2,3,4,5,6,7,8,9]；
var svg=d3.选择（“主体”）.追加（“svg”）；
var circles=svg.append（“g”）.attr（“id”，“groupOfCircles”）
.selectAll（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cx”，函数（d）{返回d*20；}）
.attr（“cy”，函数（d）{返回d*10；}）
.attr（“r”，函数（d）{返回d；}）
.attr（“填充”、“绿色”）；
d3.选择（“圆圈：第n个子（3）”）.attr（“填充”、“红色”）；// 如果要在d3逻辑中执行此操作，匿名函数在数据旁边总是有一个索引参数：

my_selection.attr("fill",function(d,i) {return i%3==0?"red":"green";});

您还可以使用圆数组设置元素的属性：

d3.select(circles[3]).attr("fill","red");


//JS
var数据=[1,2,3,4,5,6,7,8,9]；
var svg=d3.选择（“主体”）.追加（“svg”）；
var circles=svg.append（“g”）.attr（“id”，“groupOfCircles”）
.selectAll（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cx”，函数（d）{返回d*20；}）
.attr（“cy”，函数（d）{返回d*10；}）
.attr（“r”，函数（d）{返回d；}）
.attr（“填充”、“绿色”）；
var group=document.querySelector（“#groupOfCircles”）；
var circleNodes=group.getElementsByTagName（'circle'）；
d3.选择（圆圈代码[3]）.attr（“填充”、“红色”）
这里是使用函数作为选择器的另一个选项

    circles.select(function (d,i) { return (i==3) ?  this : null;})
    .attr("fill", "red");

如果选择器是一个函数，它将获取数据（d）和迭代器（i）作为参数。然后，如果选择，则返回对象（this），如果未选择，则返回null。
d3v4现在支持使用selection.nodes（）返回此选择的所有元素的数组。然后，我们可以通过d3.select（selection.nodes（）[n]）.attr（something）更改第n个元素的属性


//JS
var数据=[1,2,3,4,5,6,7,8,9]；
var svg=d3.选择（“主体”）.追加（“svg”）；
var circles=svg.append（“g”）.attr（“id”，“groupOfCircles”）
.selectAll（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cx”，函数（d）{返回d*20；}）
.attr（“cy”，函数（d）{返回d*10；}）
.attr（“r”，函数（d）{返回d；}）
.attr（“填充”、“绿色”）；
circleElements=circles.nodes（）；//这是我通常采用的方法，但我认为当您实际想要更改单个元素时，重新绘制所有选择有点过分。绘制圆时，颜色只设置一次。您当然不必重新选择所有内容。而你最初的方法是重新选择的，实际上我会。用绿色画圆圈；2.进行更新循环以重新定位目标圆1秒。如果我在for循环中重用您的
return I===3？“red”：“green”
，则在每个循环中，我将重新绘制所有圆，并根据条件将其涂成红色。（如果我能很好地理解d3）好吧，但它似乎对我的小提琴不起作用。你们能提供一个吗？这不起作用，因为D3选择不是真正的数组，它需要类似于
circles[0][3].attr（…）
或
D3.select（circles[0][3].node（）.attr（…）
@Peter啊，好的，
circles
不是D3选择，而是一个节点数组。在这种情况下，它可以正常工作，我只是假设它是一个D3选择，就像在问题中一样。那么D3V4呢？你不能再做
circles[0][4]
。内部已经更改，但你仍然可以这样做：
circles.\u group[0][4]
。从节点重新选择可能效率不高，为什么d3不应该让jquery等效于.eq（）
d3.select(circles[3]).attr("fill","red");

    circles.select(function (d,i) { return (i==3) ?  this : null;})
    .attr("fill", "red");