d3js диагональ в макете дерева

Question

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

Моя проблема заключается в том, что я хочу отображать узлы в виде прямоугольников и иметь края графа, начинающиеся с правой стороны прямоугольника узла, но заканчивающиеся в левой части прямоугольника дочернего узла. Прямо сейчас они являются сопутствующими инцидентами, которые заставляют его выглядеть немного грязно.

Я попытался использовать проекцию по диагонали, но так же изменяет как начальную, так и конечную точки (скажем, сдвигая их справа на X пикселей), а не наоборот, для каждой точки (для начальной точки, сдвига правый X пикселей, но для конечной точки сдвиньте левый X пикселей).

Любые идеи? Спасибо.

В соответствии с просьбой - вот код JS я использую, чтобы сделать мое дерево ....

function renderTree (root) {  

var rect_width = 150; 
var rect_height = 25; 
var rect_corner_radius = 4; 
var transition_duration = 200; 

var tree = d3.layout.tree(); 

tree.size([900,700]); 

var nodes = tree.nodes(root); 
var links = tree.links(nodes); 

var diagonal = d3.svg.diagonal().projection(function (d) {return [d.y, d.x];}); 

var canvas = d3.select(".treeCanvas"); 


var tree_link = canvas.selectAll(".treeLink") 
       .data(links, function (d) { return d.target.oid;}); 

var tree_node = canvas.selectAll(".treeNode").data(nodes, function (d) { return d.oid;}); 

//transition existing nodes and links 
tree_link.exit().transition().duration(transition_duration).remove(); 

tree_link.transition().duration(transition_duration).attr("d", diagonal); 

tree_node.exit().transition().duration(transition_duration).remove(); 


tree_node.selectAll("rect").transition().duration(transition_duration) 
        .attr("x", function (d) { return d.y; }) 
        .attr("y", function (d) { return d.x - rect_height/2; }); 

tree_node.selectAll("text").transition().duration(transition_duration) 
        .attr("dy", function (d) {return d.x +3;}) 
        .attr("dx", function (d) {return d.y +3;}); 


//add new nodes & links 

tree_link.enter() 
      .append("path") 
      .attr("class", "treeLink") 
      .attr("d", diagonal) 
      .attr("stroke", "black") 
      .attr("fill", "none"); 

var tree_node_enter = tree_node.enter() 
.append("g") 
.attr("id", function(d) { return "node" + d.oid; }) 
.attr("class", "treeNode"); 

tree_node_enter.append("rect") 
.attr("fill", "white") 
.attr("stroke", "steelblue") 
.attr("stroke-width", "2") 
.attr("x", function (d) { return d.y; }) 
.attr("y", function (d) { return d.x - rect_height/2; }) 
.attr("width", rect_width) 
.attr("height", rect_height) 
.attr("rx", rect_corner_radius) 
.attr("ry", rect_corner_radius) 
.on("click", function (d) { updateTree(d);}); 

tree_node_enter.append("text") 
.attr("dy", function (d) {return d.x +3;}) 
.attr("dx", function (d) {return d.y +3;}) 
.attr("textLength", rect_width -6) 
.text(function (d) { return d.className + "=" + d.id; }); 


} 

Answer 1

diagonal.target function позволяет определить координаты конечной точки диагонали. Вы можете использовать его, чтобы переместить точку в левую сторону узла.