d3.js link seperation in tree layout

Question

То, что я пытаюсь сделать, - иметь промежуток между ссылками на макет дерева d3.js, в котором имя узла соответствует (см. Изображение).

http://s15.postimg.org/xn1eenxh7/linesplit.jpg

Мой график похож на этот пример: http://bl.ocks.org/mbostock/4063550 То, что я пытался изменить это d.y в проекции.

var diagonal = d3.svg.diagonal.radial() 
.projection(function(d) { return [d.y, d.x/180 * Math.PI]; }); 

Это приводит к изменению как родительских, так и дочерних ссылок. Я уверен, что есть простое решение, но я не понимаю его прямо сейчас.

Спасибо за любую помощь.

Answer 1

Чтобы переместить текст, не делайте этого в проекции, но в преобразовании g контейнера текст находится в:

var node = svg.selectAll(".node") 
    .data(nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y - 50) + ")"; }) //<-- -50 moves it 

Чтобы разорвать линию, добавьте заполненный белый прямоугольник в контейнер:

node.append("rect") 
    .attr('width', 32) 
    .attr('height',15) 
    .attr('fill', 'white') 
    .attr('y', -7.5); 

Пример here.