plunkerでd3 その11

概要

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

練習問題

v5でcluster表示せよ。

写真

サンプルコード

var diameter = 960,
  radius = diameter / 2,
  innerRadius = radius - 120;
var cluster = d3.cluster().size([360, innerRadius]);
var line = d3.radialLine().curve(d3.curveBundle.beta(0.85))
  .radius(function(d) { 
		return d.y; 
	}).angle(function(d) { 
		return d.x / 180 * Math.PI; 
	});
var svg = d3.select("body").append("svg").attr("width", diameter)
  .attr("height", diameter).append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")");
var link = svg.append("g").selectAll(".link"),
  node = svg.append("g").selectAll(".node");
function packageHierarchy(classes) {
  var map = {};
  function find(name, data) {
    var node = map[name], 
      i;
    if (!node) 
		{
      node = map[name] = data || {name: name, children: []};
      if (name.length) 
			{
        node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
        node.parent.children.push(node);
        node.key = name.substring(i + 1);
      }
    }
    return node;
  }
  classes.forEach(function(d) {
    find(d.name, d);
  });
  return d3.hierarchy(map[""]);
}
function packageImports(nodes) {
  var map = {},
    imports = [];
  nodes.forEach(function(d) {
    map[d.data.name] = d;
  });
  nodes.forEach(function(d) {
    if (d.data.imports) 
      d.data.imports.forEach(function(i) {
        imports.push(map[d.data.name].path(map[i]));
      });
  });
  return imports;
}
d3.json("lib/flare.json").then(function(data) {
  var root = packageHierarchy(data).sum(function(d) { 
		return d.size; 
	});
  cluster(root);  
  link = link.data(packageImports(root.leaves())).enter().append("path")
    .each(function(d) { 
			d.source = d[0], 
      d.target = d[d.length - 1]; 
		}).attr("class", "link").attr("d", line);
  node = node.data(root.leaves()).enter().append("text")
    .attr("class", "node")
    .attr("dy", "0.31em")
    .attr("transform", function(d) { 
			return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); 
		}).attr("text-anchor", function(d) { 
			return d.x < 180 ? "start" : "end"; 
		}).text(function(d) { 
			return d.data.key; 
		});      
}).catch(function(error) {
	alert("ng")
});

成果物

以上。