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.x
と
d.y
を任意の位置に移動します。これらのノードはシミュレーションの一部であり、通常の表示コード(transform属性の設定など)を使用できます。ただし、固定とマークされているため、シミュレーションではなく、ドラッグによってのみ移動できます。
詳細はフォースレイアウトのドキュメントを参照してください ( v3 docs , 現在のドキュメント ) で、ルートノードがどのように配置されるかも見てみましょう。 この例 .
関連
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] ECMAScriptとは?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法