akobashikawa/decision-tree.html

## decision-tree.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Decision Tree</title>
</head>
<body>
  <ul id="tree"></ul>

  <script src="https://d3js.org/d3.v5.min.js"></script>

  <script>
    const generateItem = () => {
      const item = [];
      const n = Math.floor(Math.random() * 10);
      // console.log(n);
      for (let i = 0; i <= n; i++) {
        const v = Math.floor(Math.random() * 10);
        item.push(v);
      }
      // console.log(item);
      return item;
    };

    const putInTree = (tree, item) => {
      let pointer = tree;
      for (let n = 0; n < item.length; n++) {
        let v = item[n];
        if (!pointer.hasOwnProperty(v)) {
          pointer[v] = {};
        }
        pointer = pointer[v];
      }
    }

    const tree = [
      {
        name: 1,
        children: [
          {name: 3}
        ]
      },
      {
        name: 2,
        children: [
          [
            {name: 4}
          ]
        ]
      }
    ];
    setInterval(() => {
      // const item = generateItem();
      // console.log(item);
      // putInTree(tree, item);
      // console.log(tree);
    }, 1000);

    d3.select('ul#tree')
      .selectAll('li')
      .data(tree)
      .enter()
      .append('li')
      .text(function(d) {
        console.log(d);
        return d.name;
      });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Decision Tree</title>
	</head>
	<body>
	<ul id="tree"></ul>

	<script src="https://d3js.org/d3.v5.min.js"></script>

	<script>
	const generateItem = () => {
	const item = [];
	const n = Math.floor(Math.random() * 10);
	// console.log(n);
	for (let i = 0; i <= n; i++) {
	const v = Math.floor(Math.random() * 10);
	item.push(v);
	}
	// console.log(item);
	return item;
	};

	const putInTree = (tree, item) => {
	let pointer = tree;
	for (let n = 0; n < item.length; n++) {
	let v = item[n];
	if (!pointer.hasOwnProperty(v)) {
	pointer[v] = {};
	}
	pointer = pointer[v];
	}
	}

	const tree = [
	{
	name: 1,
	children: [
	{name: 3}
	]
	},
	{
	name: 2,
	children: [
	[
	{name: 4}
	]
	]
	}
	];
	setInterval(() => {
	// const item = generateItem();
	// console.log(item);
	// putInTree(tree, item);
	// console.log(tree);
	}, 1000);

	d3.select('ul#tree')
	.selectAll('li')
	.data(tree)
	.enter()
	.append('li')
	.text(function(d) {
	console.log(d);
	return d.name;
	});
	</script>
	</body>
	</html>