0

Diagonalパスジェネレーターを使用して、線で接続されたツリーレイアウトでd3.jsを使用してツリーグラフを作成しています。

私の問題は、ノードを長方形としてレンダリングし、グラフのエッジをノード長方形の右側から開始し、子ノード長方形の左側で終了させたいことです。現在、それらは同時発生しているため、少し乱雑に見えます。

対角線上の投影を使用してみましたが、開始点と終了点の両方を同じ方法で変更します (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; });


}
4

1 に答える 1

0

このdiagonal.target関数を使用すると、対角線の終点の座標を指定できます。これを使用して、ポイントをノードの左側に移動できます。

于 2013-09-25T16:51:56.397 に答える