plunkerでd3 その12

概要

plunkerでd3やってみた。
練習問題、やってみた。

練習問題

v5でtree表示せよ。

写真

サンプルコード

	var width = document.querySelector("svg").clientWidth;
	var height = document.querySelector("svg").clientHeight;
	var data2 = {"name":"test1","children":[{"name":"T","children":[{"name":"Visual","children":[{"name":"Canvas","children":[{"name":"Image","children":[{"name":"Image","children":[{"name":"ConnectPoint","children":[]}]},{"name":"Vertical Layout","children":[{"name":"Text","children":[]}]}]}]}]}]},{"name":"Display","children":[{"name":"Visual","children":[{"name":"Canvas","children":[{"name":"Image","children":[{"name":"Image","children":[{"name":"ConnectPoint","children":[{"name":"Wire","children":[]}]}]},{"name":"Vertical Layout","children":[{"name":"Vertical Layout","children":[{"name":"Text","children":[]}]}]}]}]}]}]}]};
	root = d3.hierarchy(data2);
	var tree = d3.tree().size([height, width - 160])
	tree(root);
	g = d3.select("svg").append("g").attr("transform", "translate(80,0)");
	var link = g.selectAll(".link").data(root.descendants().slice(1))
		.enter().append("path").attr("class", "link")
		.attr("d", function(d) {
			return "M" + d.y + "," + d.x +
				"C" + (d.parent.y + 100) + "," + d.x +
				" " + (d.parent.y + 100) + "," + d.parent.x +
				" " + d.parent.y + "," + d.parent.x;
		});
	var node = g.selectAll(".node").data(root.descendants())
		.enter().append("g").attr("class", "node")
		.attr("transform", function(d) { 
			return "translate(" + d.y + "," + d.x + ")"; 
		});
	node.append("circle").attr("r", 8).attr("fill", "#999");
  node.append("text").attr("dy", 3).attr("x", function(d) { 
		return d.children ? -12 : 12; 
	}).style("text-anchor", function(d) { 
		return d.children ? "end" : "start"; 
	}).attr("font-size", "200%").text(function(d) { 
		return d.data.name; 
	});

成果物

以上