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（这个），但我什么也没得到。

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");
  })

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

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");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

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

1 个答案: