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

树形布局中的d3js对角线

1 个答案: