Albero D3: linee al posto della proiezione diagonale

Question

Sto usando d3.js per creare un albero usando this example.

Questo gestisce i dati che ho perfettamente e produce il risultato desiderato, tranne per un dettaglio: Non voglio quei sinuose linee di connessione tra i nodi, voglio una linea pulita e semplice. Qualcuno può mostrarmi come farlo?

Ho cercato la documentazione dell'API per d3.js, ma senza successo. Da quello che ho capito, la funzione svg.line dovrebbe produrre una linea retta data un insieme di due coppie di coordinate (x, y). Quello che penso che ho bisogno di sapere è: dato questi dati, come creare una linea di data la (cx, cy) di ciascuna coppia di nodi nelle link matrice:

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}); 
} 
}); 

Answer 1

In realtà io capito da altri esempi:

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; });