1. ホーム
  2. javascript

D3 Force Directed Layoutのノード位置を修正する

2023-11-26 03:37:16

質問

私の力指向レイアウトのいくつかのノードが、すべての力を無視して、ノードの属性に基づいた固定位置にとどまるようにしたいのですが、一方で、ドラッグして他のノードに反発力を与え、そのリンク線を維持することは可能なままです。

私は、これほど単純なことだと思いました。

force.on("tick", function() {
    vis.selectAll("g.node")
        .attr("transform", function(d) {
            return (d.someAttribute == true) ?
               "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
               "translate(" + d.x + "," + d.y + ")"
        });
  });

また、ノードの x および y 属性を目盛りごとに手動で設定しようとしましたが、そうするとリンクは、力の影響を受けた場合にノードがあるであろう場所に浮き上がり続けます。

明らかに、これがどのように機能することになっているか、基本的な誤解があります。リンクを維持しながら、ノードをドラッグ可能な位置に固定するには、どうすればよいでしょうか?

どのように解決するのですか?

設定 d.fixed を true に設定し、初期化する。 d.xd.y を任意の位置に移動します。これらのノードはシミュレーションの一部であり、通常の表示コード(transform属性の設定など)を使用できます。ただし、固定とマークされているため、シミュレーションではなく、ドラッグによってのみ移動できます。

詳細はフォースレイアウトのドキュメントを参照してください ( v3 docs , 現在のドキュメント ) で、ルートノードがどのように配置されるかも見てみましょう。 この例 .