Остановка линии на внешней границе круга

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