select_edge_nodes

by seiketkm

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
<p>
  二分木を書く
</p>
<button id="btn">select example to example</button>

<div id="mynetwork"></div>

CSS

#mynetwork {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid lightgray;
  z-index:-1;
}

JavaScript

// ノード
var nodes = new vis.DataSet([
  {id: ".", label: '.'},
  {id: "jp", label: 'jp'},
  {id: "com", label: 'com'},
  {id: "example", label: 'example'},
  {id: "example2", label: 'example'},
  {id: "test", label: 'test'}
]);

// エッジ
var edges = new vis.DataSet([
  {from: ".", to: "jp", id:"hoge"},
  {from: ".", to: "com", id:"piyo"},
  {from: "jp", to: "example2", id:"fuga"},
  {from: "jp", to: "test"},
  {from: "com", to: "example",id:"moge"},
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
	layout: {
	    hierarchical: {
	        direction: "UD",
	        sortMethod: "directed"
	    }
	}
};
var network = new vis.Network(container, data, options);
network.on("select",(e)=>{
  console.log("nodes", e.nodes);
	console.log("edges", e.edges);
})
const btn = document.getElementById('btn');
btn.onclick = ()=>{
  network.setSelection({
    nodes:["example","jp",".","com","example2"],
    edges:["hoge","piyo","fuga","moge"]
  },
  {
    unselectAll: true,
    highlightEdges: false
  })
}