d3.js - D3 tree: lines instead of diagonal projection -
i using d3.js create tree using this example.
this handles data have , produces desired outcome except 1 detail: don't want wiggly connector lines between nodes, want clean , simple line. can show me how produce that?
i've been looking @ api documentation d3.js, no success. understood, svg.line
function should produce straight line given set of 2 pairs of coordinates (x,y). think need know is: given data, how create line given (cx,cy) of each pair of nodes in links array:
var margin = {top: 40, right: 40, bottom: 40, left: 40}; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("graph.csv", function(links) { var nodesbyname = {}; links.foreach(function(link) { var parent = link.source = nodebyname(link.source), child = link.target = nodebyname(link.target); if (parent.children) parent.children.push(child); else parent.children = [child]; }); var nodes = tree.nodes(links[0].source); svg.selectall(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", diagonal); svg.selectall(".node") .data(nodes) .enter().append("circle") .attr("class", "node") .attr("r", 10) .attr("cx", function(d) { return d.y; }) .attr("cy", function(d) { return d.x; }); function nodebyname(name) { return nodesbyname[name] || (nodesbyname[name] = {name: name}); } });
actually figured out other example:
svg.selectall(".link") .data(links) .enter().append("line") .attr("class", "link") .attr("x1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.x; }) .attr("x2", function(d) { return d.target.y; }) .attr("y2", function(d) { return d.target.x; });