1

動的に作成されたデータセットのノードにツリーのような構造を作成することを計画しており、力有向グラフのすべてのノードの y 軸座標を設定したいと考えています。言い換えれば、ノードを (ツリー構造のように) レベルに配置し、ノードは x 軸で自由に移動して最適化できるようにしたいと考えています。

最終結果は、ノードがデフォルトのように放射状に配置されるのではなく、割り当てられたレベルに配置されるツリーになります。兄弟リンクはオーバーラップしてはならず、できるだけ短くする必要があります (論理的なグループ化のため、フォース グラフを介してこれを行う必要があります)。
誰かがこれよりも簡単な解決策を持っている場合、私は完全に耳を傾けます.

コードの抜粋:

ldLinks = [
{source: "root", target: "1", source_level: 0, target_level: 1},
{source: "root", target: "2", source_level: 0, target_level: 1},
{source: "root", target: "3", source_level: 0, target_level: 1},
{source: "root", target: "4", source_level: 0, target_level: 1},
{source: "1", target: "1.1", source_level: 1, target_level: 2},
{source: "1", target: "1.2", source_level: 1, target_level: 2},
{source: "2", target: "2.1", source_level: 1, target_level: 3},
{source: "2", target: "2.2", source_level: 1, target_level: 3},
{source: "3", target: "3.1", source_level: 1, target_level: 3},
{source: "4", target: "3.2", source_level: 1, target_level: 3},
{source: "4", target: "3.3", source_level: 1, target_level: 3},
{source: "3", target: "3.2", source_level: 2, target_level: 3},
{source: "3", target: "4.1", source_level: 2, target_level: 3},
{source: "2.1", target: "5.1", source_level: 3, target_level: 4},
{source: "3.1", target: "5.1", source_level: 3, target_level: 4},
{source: "1", target: "5", source_level: 1, target_level: 4},
];

var dNodes = {};

// Compute the distinct dNodes from the ldLinks.
ldLinks.forEach(function(link) {
    link.source = dNodes[link.source] || (dNodes[link.source] = {name: link.source, level: link.source_level});
    link.target = dNodes[link.target] || (dNodes[link.target] = {name: link.target,  level: link.target_level});
});

//parameterize nodes
for (var sNodeName in dNodes) {
    //dNodes[sNodeName].fixed = (only fixed along y-axis)
    dNodes[sNodeName].y = (dNodes[sNodeName].level * 50)
}
4

1 に答える 1

0

ハザ！

この回答からのリミンのコメントに感謝します!

を設定し、関数 内にforce.gravity(0)境界 ( .attr("cx/cy")) を追加しました。nodetick()

function tick() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr("cx", function(d) { return d.x = Math.max(8, Math.min(width - 8, d.x)); })
        .attr("cy", function(d) { return d.y = Math.max(100*d.level, Math.min(100*d.level, d.y)); });
}
于 2014-11-20T16:12:28.200 に答える