質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2677閲覧

vis.jsで描画したノードの移動後の座標を取得したい

mi_ho

総合スコア34

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/09/02 05:26

実現したいこと

vis.jsを使って描画した,移動可能(ドラッカブル)なノードの,移動後の位置座標を取得したいのですが,うまくいきません.
移動させた後のノードの位置座標を保持しておいて,移動後のノードの位置関係を再現したいです.

発生している問題

以下のように,ノードを準備し,ノードをクリックするとそのノードの位置座標を表示するようにしました.

Jacascript

1//ノードを作成 2var nodes = new vis.DataSet([ 3 {id: 1, label: 'A', x:0, y:0}, 4 {id: 2, label: 'B', x:100, y:100}, 5]); 6var container = document.getElementById('mynetwork'); 7var data = {nodes: nodes}; 8var options = { 9 physics: false, 10 nodes: {shape: 'box'}, 11}; 12var network = new vis.Network(container, data, options); 13 14//ノードクリックで位置座標を表示 15network.on("click", function (params) { 16 if (params.nodes.length > 0) { 17 var nodeId = params.nodes[0]; 18 console.log(nodes.get(nodeId).label); 19 console.log(nodes.get(nodeId).x); 20 console.log(nodes.get(nodeId).y); 21 } 22});

ノードを描画後,ノードをドラッグしないまま,ノードをクリックすると,A,Bの座標は,あらかじめ設定しておいた,A(0, 0),B(100, 100) と表示されます.
イメージ説明

ノードをドラッグして,ノードを移動させた後,再度ノードをクリックし,A,Bの座標を確認しました.
ここで,移動後の座標を返して欲しいのですが,返ってきたのはあらかじめ設定しておいた座標,A(0, 0),B(100, 100)でした.位置座標が更新されていません.
イメージ説明
移動後のノードの座標を取得するには,どのような手段があるでしょうか.
また,ノードの位置座標の取得以外で,移動後のノードの位置関係を再現する方法に心当たりがあれば,ぜひご教授いただきたいです.
よろしくお願いいたします.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

getPositions()で解決できました.

投稿2020/09/06 04:51

mi_ho

総合スコア34

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問