クリックしたところが中心になるようにキャンバスの座標を移動させたい

前提

JavaScriptでソーシャルグラフを作っています。

実現したいこと

クリックしたノードを中心になるようにキャンバスを移動する。
例えば、下記のNode4のクリック時にNode4が中心になるようにキャンバスの座標を移動させたい。

該当のソースコード

Javascript
1<html>
2  <head>
3    <meta charset="utf-8" />
4    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css?20210909">
5    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js" asp-append-version="true"></script>
6      <style type="text/css">
7      #mynetwork {
8        width: 100%;
9        height: 70%;
10        border: 1px solid lightgray;
11      }
12      </style>
13  </head> 
14  <body>
15    <div id="mynetwork"></div>
16    <script type="text/javascript">
17    // create an array with nodes
18      var nodes = new vis.DataSet([
19        { id: 1, label: "Node 1" },
20        { id: 2, label: "Node 2" },
21        { id: 3, label: "Node 3" },
22        { id: 4, label: "Node 4" },
23      ]);
24
25    // create an array with edges
26      var edges = new vis.DataSet([
27        { from: 1, to: 3 },
28        { from: 1, to: 2 },
29        { from: 2, to: 4 },
30      ]);
31
32    // create a network
33      var container = document.getElementById("mynetwork");
34      var data = {
35        nodes: nodes,
36        edges: edges,
37      };
38      console.log(data);
39      var options = {};
40      var network = new vis.Network(container, data, options);
41      network.on("click", function(params) {
42        if (params.nodes.length == 1) {
43          var nodeId = params.nodes[0];
44          var node = nodes.get(nodeId);
45          var xy = network.getPositions(nodeId) //xy = 1: {x:165, y:42}のように座標は取れている
46          //ここでクリックしたノードを中心になるようにキャンバスを移動するようにしたい
47        }
48      });

補足情報（FW/ツールのバージョンなど）

Javascriptのライブラリはvis.jsです。

行動規範の内容に同意します

回答1件

ベストアンサー

このライブラリ詳しくないけれどクリックされた位置が変数xyでとれているなら
networkの各ノードのポジションからxy.x、xy.yの座標を引けばいいだけの気がします
そうするとクリックされた座標xyが（0,0）の原点に移動しますね？
そこにキャンバスの中心の座標を求めて(cxyとでもします)から
networkの各ノードのポジションにcxy.x、cxy.yを足す
そうすればクリックされた座標xyがキャンバス中心になった座標系になるはず

書き方があってるか分からないけれどこんなイメージ

var xy = network.getPositions(nodeId) //クリックされた座標
var cxy = getCenterPosition() //画面の中央の座標(ここをこのライブラリでどうやるかは調べて)
for(i=0;i<network.count;i++) //すべてのノードを列挙して
{
nodeId=i;
var wxy=network.getPositions(nodeId); // 各ノードの座標をえる
wxy.x -= xy.x ; // ノードの位置からクリックされた座標を引いて、クリックされた座標が（0,0）の原点になるようにする
wxy.y -= xy.y ;
wxy.x += cxy.x ; // クリックされた座標が画面中心になるようにする
wxy.y += cxy.y ;
network.setPositions(nodeId); // のどの座標セット
}