var data; // {name: 'root', nodes: [{name: 'child1', value: 3}, {name: 'child2', value: 5}]}var tree = d3.layout.tree().size([300, 300]).children(function(d){return d.nodes;});
var nodes = tree.nodes(data), links = tree.links(nodes);
var svg = d3.select('svg');
var node = svg.selectAll('circle').data(nodes).enter().append('circle'); // nodeを描きますvar link = svg.selectAll('path').data(links).enter().append('path'); // pathを描きます
linkの描き方(直線)
pathのd属性を設定します。この際に、例えば
var link = svg.selectAll('path.link').data(links).enter().append('path').attr('class', 'link');
link.attr('d', function(d){return'M'+d.source.x+','+d.source.y+'L'+d.target.x+','+d.target.y; })
とすることで直線を引くことができます
linkの描き方(曲線)
pathのd属性を設定します。直線を引いても楽しくないので、diagonalを使います
var diagonal = d3.svg.diagonal().projection(function(d){return[d.x, d.y]; });
var link = svg.selectAll('path.link').data(links).enter().append('path').attr('class', 'link');
link.attr('d', diagnoal);