D3 Дерево Диаграмма Изогнутые линии Начальное положение

Question

Резюме

Используя пример ниже я создал базу данных приводится в виде дерева с блоками информации, а не на окружности узлов.

Interactive d3.js tree diagram

Пожалуйста, смотрите пример ниже скриншоте:

Идея для линии, чтобы начать с, где блок заканчивается. Я предполагаю, что это что-то сделать с помощью следующей функции:

// Custom projection 
var linkProjection = d3.svg.diagonal() 
    .source(function (d) { 
     return { "y": d.source.y, "x": d.source.x }; 
    }) 
    .target(function (d) { 
     return { "y": d.target.y, "x": d.target.x }; 
    }) 
    .projection(function (d) { 
     return [d.y, d.x]; 
    }); 

// Enter any new links at the parent's previous position. 
link.enter().insert("path", "g") 
    .attr("class", "link") 
    .style("fill", "none") 
    .style("stroke", "#d1d6da") 
    .style("stroke-width", "1") 
    .attr("d", function (d) { 
     var s = { x: source.x0, y: source.y0 }; 
     var t = { x: source.x0, y: source.y0 }; 
     return linkProjection({ source: s, target: t }); 
}); 

Я попытался добавить ширина блока к координате у, но хотя она начинается с правильной позиции с чертежа заканчивается в начале блока снова.

Любые предложения?

Answer 1

Без лишнего кода трудно сказать, но я думаю, что это связано с системой координат. x, y указывает на центр объекта, который я думаю. Таким образом, вам придется перевести y вправо на половину длины вашего поля.

Т.е. предыдущее положение родителей (x, y) указывает на центр родителя.