使用d3.select从另一个圆的属性设置圆的属性？

Question

我希望把周围的一些SVG圈的SVG圈。我找到了使用d3.selectAll().filter()的所需圆圈。这几乎奏效 - 创建一个圆圈。但我无法弄清楚如何从旧圆的中心设置新圆的中心，因此新圆创建在0,0。没有我试过的工作。

// first I find the circles I want 
foundNodeCircles = d3.selectAll(".node").filter(function(d,i){return d.label == nodeRE;}); 

// Then I create a new, larger circle for each circle that I found: 
svg.selectAll(".nodeHighlightRing") 
.data(foundNodeCircles) // make one ring per node circle 
.enter().append("circle") // make the ring 
.attr("class", "nodeHighlightRing") // specify its qualities 
.attr("cx", function(d) { return d.cx;}) // BROKEN: set center to center of old circle 
.attr("cy", function(d) { return d.cy;}) // BROKEN: set center to center of old circle 
.attr("r", 10) 
.style("opacity", 0) 
.style("stroke", "green") 
.style("stroke-width", "1.5") 
.style("stroke-opacity", "1"); 

在除了d.cx，我已经试过this.cx，d.attr["cx"]，this.attr["cx"]，d3.select(this).attr("cx")，d3.select(d).attr("cx")，而且似乎不太可能奏效一些其他的东西。没有成功。

我认为this问题或this one会帮助，但我显然做了一些不同的事情。

Answer 1

问题是您的变量foundNodeCircles正在保存d3选择，并且数据加入方法.data()需要一个表示数据的数组。

如果您改为使用foundNodeCircles[0]进行数据连接，则将引用选择中包含的元素数组，而不是选择本身。然后，当你设置你的属性，d将参考的DOM元素本身，所以你可以使用一个D3的选择，选择d和呼叫.attr要获得的属性，或者干脆使用DOM方法.getAttribute。

svg.selectAll(".nodeHighlightRing") 
    // BIND TO THE ELEMENTS RATHER THAN THE SELECTION 
    .data(foundNodeCircles[0]) 
    .enter().append("circle") 
    .attr("class", "nodeHighlightRing") 
    // EITHER OF THESE METHODS SHOULD WORK 
    .attr("cx", function(d) { return d3.select(d).attr("cx"); }) 
    .attr("cy", function(d) { return d.getAttribute("cy"); }) 
    // ... etc. ...