5

我不确定我是否正确分组了我的元素，但我在 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;
         });
4

1 回答 1

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>

于 2019-06-24T03:53:37.163 回答