binaly-tree

by seiketkm

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />

<p>
  二分木を書く
</p>
<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"},
  {from: ".", to: "com"},
  {from: "jp", to: "example2"},
  {from: "jp", to: "test"},
  {from: "com", to: "example"},
]);

// 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);