如何访问组内元素的属性？

Question

我不确定是否将元素正确分组，但是在d3中的布局如下：

var circleGroup = svg.selectAll("g")
               .data(nodeList)
               .enter()
               .append("g")

这将创建一个群组，每个群组中需要一个圆圈：

circleGroup.append("circle") 
         .attr("cx", function(d,i){
            return coordinates[i][0];
         })
         .attr("cy", function(d,i){
            return coordinates[i][1];
         })
         .attr("r", function(d){
            return 10;
         })
         .attr("fill", "white");

数据本身实际上没有任何坐标数据，因此我将它们动态地排列成一个圆圈，然后根据索引对其进行定位。我还添加了一些标签。我在这里重复坐标[i] [0]，但是有没有办法访问圆的“ cx”和“ cy”属性？我尝试了几种形式的d3.select（this），但我什么也没得到。

circleGroup.append("text")
         .attr("x", function(d,i){
            return coordinates[i][0];
         })
         .attr("y", function(d,i){
            return coordinates[i][1];
         })
         .style("text-anchor","middle")
         .text(function(d,i){
            return d;
         });

Answer 1

不要搞乱索引，这很难维护并且容易出错。相反，根据您的特定树结构，请使用node.previousSibling：

circleGroup.append("text")
  .attr("x", function() {
    return d3.select(this.previousSibling).attr("cx");
  })
  .attr("y", function() {
    return d3.select(this.previousSibling).attr("cy");
  })

这是使用（大部分）您的代码的演示：

circleGroup.append("text")
  .attr("x", function() {
    return d3.select(this.previousSibling).attr("cx");
  })
  .attr("y", function() {
    return d3.select(this.previousSibling).attr("cy");
  })

var svg = d3.select("svg")
var circleGroup = svg.selectAll("g")
  .data(d3.range(5))
  .enter()
  .append("g");

circleGroup.append("circle")
  .attr("cx", function(d, i) {
    return 20 + Math.random() * 280;
  })
  .attr("cy", function(d, i) {
    return 20 + Math.random() * 130;
  })
  .attr("r", function(d) {
    return 10;
  })
  .style("opacity", 0.2);

circleGroup.append("text")
  .attr("x", function() {
    return d3.select(this.previousSibling).attr("cx");
  })
  .attr("y", function() {
    return d3.select(this.previousSibling).attr("cy");
  })
  .style("text-anchor", "middle")
  .text("Foo");