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 #visualization{13 width: 100%;14 height: 30%;15 }16 </style>17 </head> 18 <body>19 <div id="mynetwork"></div>20 <script type="text/javascript">21 var nodes = new vis.DataSet([22 { id: 1, label: "Node 1" },23 { id: 2, label: "Node 2" },24 { id: 3, label: "Node 3" },25 { id: 4, label: "Node 4" },26 ]);27 28 var edges = new vis.DataSet([29 { from: 1, to: 3 },30 { from: 1, to: 2 },31 { from: 2, to: 4 },32 ]);33 34 var container = document.getElementById("mynetwork");35 var data = {36 nodes: nodes,37 edges: edges,38 };39 x = container 40 var options = {};41 var network = new vis.Network(container, data, options);42 console.log(network);43 network.on("click", function(params) {44 if (params.nodes.length == 1) {45 var nodeId = params.nodes[0];46 network.moveNode(nodeId,0,0);47 console.log(nodeId);48 }49 });50 </script>51 52 <div id="visualization"></div>53 <script type="text/javascript">54 var container = document.getElementById('visualization');55 var items = new vis.DataSet([56 {id: 1, content: 'item 1', start: '2014-04-20'},57 {id: 2, content: 'item 2', start: '2014-04-14'},58 {id: 3, content: 'item 3', start: '2014-04-18'},59 {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},60 {id: 5, content: 'item 5', start: '2014-04-25'},61 ]);62 63 var options = {64 margin: {65 item: 20,66 axis: 4067 }68 }69 //タイムラインのitemクリック時70 var timeline = new vis.Timeline(container, items, options);71 timeline.on("click", function (properties) {72 if(properties.item){73 const item = items.get(properties.item);74 console.log(item.id); //item.id = クリックされたitem.idの数値75 //この際にNode1を中心に動かす処理をしたい76 }77 });78 </script>79 </body>80</html>
0 コメント