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. ...

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

1 个答案: