Javascript 在圆的外边缘停止一条线

嘿，伙计们，我最近开始学习D3.js，遇到了一个问题：。我怎样才能停止在这些圆的外边缘画线

另一种可能的解决方案是重新排列图层，使圆形图层位于直线图层的顶部

这是我的示例代码

data = [{name: 'one', parent: 'one', a: 1}, {name: 'two', parent: 'one', a: 2}, {name: 'three', parent: 'one', a: 2}]
  r = 30;
  var centerX = function (d, i) {
    return (i * ((r * 2) + 20)) + r;
  };

  var centerY = function (a, i) {

    return (a * 160) + (r * 2);
  }
  var global = d3.select('body')
    .append('svg')
    .attr('width', 500)
    .attr('height', 500)  

  global.selectAll("circle")
    .data(data)
    .enter()
      .append("circle")
      .style("stroke", "gray")
      .style("fill", "aliceblue")
      .attr('r', r)
      .attr('cx', function(d, i ) {return centerX(r, i)})
      .attr('cy', function(d, i) {return centerY(d.a, i)})
      .attr('id', function(d) { return 'one'});

  global.selectAll("line")
    .data(data)
    .enter()
      .append("line")
      .style("stroke", "rgb(6,120,155)")
      .style("stroke-width", 4)
      .style('stroke-opacity', .4)
      .attr('x1', function(d, i) {return centerX(r, i)})
      .attr('y1', function(d, i) {return centerY(d.a, i)})
      .attr('x2', function(d) {
        var selector = "[id="+d.parent+"]";
        return global.select(selector).attr('cx');
      })
      .attr('y2', function(d) {
        var selector = "[id="+d.parent+"]";
        return global.select(selector).attr('cy');
      })

---

有什么想法吗？提前谢谢

切换添加线和圆的顺序是正确的，先添加线，然后添加圆。您只需小心地将线选择保留在一个变量中，该变量可用于在绘制圆后应用依赖于圆的线属性

lines
  .attr('x2', function(d) {
    var selector = "[id="+d.parent+"]";
    return global.select(selector).attr('cx');
  })
  .attr('y2', function(d) {
    var selector = "[id="+d.parent+"]";
    return global.select(selector).attr('cy');
  });