Question

嘿伙计们我最近开始学习D3.js并遇到了一个问题：http://i.stack.imgur.com/Nqghl.png。如何停止在这些圆圈的外边缘绘制线条？

可能另一种解决方案可能是重新排列图层，使圆圈位于第一行的顶部。

这是我的示例代码

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

有什么想法吗？提前谢谢！

Answer 1

你是正确的改变你追加线条和圆圈的顺序，首先是行，然后是圆圈。您只需要小心保留变量中的行选择，您可以使用该变量应用依赖于绘制圆圈后的圆的线属性。

FIDDLE example

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

在圆的外边缘停止一条线

1 个答案: