树布局中的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函数允许您指定对角线终点的坐标。 您可以使用它将点移到节点的左侧。