4

グリッド全体で等間隔にノードを配置する通常の「グリッド」を作成しました。次に、linkDistance をランダム化することで、グリッドを「かき立てる」ことができるので、規則性が低くなります。

すべてのエッジ ポイントが動かないように「固定」したいと思います。フォース レイアウトの影響を受けるのは内側のポイントだけです。

私の洞察では、これは通常の四角形グリッドであるため、重みが 4 未満のポイントは「エッジ」ポイントになるため、固定する必要があります。

ノードとリンクが強制レイアウトに追加された後にのみ重みが計算されると考えているためforEach、配列を強制レイアウトに追加し、重みに基づいてnodes条件付きでプロパティを設定した後、配列を調べています。fixed

次に、nodesプロパティを再適用しstartてシミュレーションを実行します。

ダメ。例では、すべてのポイントを移動します。

force = d3.layout.force()
                .size( [w, h ] )
                .nodes( nodes )
                .links( links )
                .linkDistance( function( d ){ return Math.random() * GRID_SPACING; } )
                .linkStrength( 1 )
                .charge( 0 )
                .gravity( 0 )
                .friction( .5 )
                .on( "tick", function() {
                    d3links.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; });

                    d3nodes.attr("cx", function(d) { return d.x; })
                        .attr("cy", function(d) { return d.y; });
                } );

            // "Pin" all the edge nodes.
            nodes.forEach( function( node ){
                if ( node.weight < 4 ){
                    node.fixed = true;
                }
            } );

            force.nodes( nodes ).start();
4

1 に答える 1

2

あなたの洞察は良いものです！しかし、タイミングがすべてです...
重みが初期化された後に「開始」イベントがトリガーされるため、これは機能するはずです...

force = d3.layout.force()
    .size([w, h])
    .nodes(nodes)
    .links(links)
    .linkDistance(function (d) { return Math.random() * GRID_SPACING; })
    .linkStrength(1)
    .charge(0)
    .gravity(0)
    .friction(.5)
    .on("tick", function () {
        d3links.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; });

        d3nodes.attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; });
    })
    .on("start", function () {
        // "Pin" all the edge nodes.
        nodes.forEach(function (node) {
            if (node.weight < 4) {
                node.fixed = true;
            }
        });
    })


force.nodes(nodes).start();

(ドラッグ動作を含めたい場合は、dragond の後に再修正する必要があります。)

于 2015-05-19T08:26:00.883 に答える