D3 Baum: Linien statt diagonaler Projektion

Question

Ich benutze d3.js, um einen Baum mit this example zu erstellen.

Dies behandelt die Daten, die ich perfekt habe und produziert das gewünschte Ergebnis mit Ausnahme eines Details: Ich möchte nicht diese wackeln Verbindungslinien zwischen den Knoten, möchte ich eine saubere und einfache Linie. Kann mir jemand zeigen, wie man das produziert?

Ich habe die API-Dokumentation für d3.js untersucht, aber ohne Erfolg. Nach dem, was ich verstanden habe, sollte die svg.line Funktion eine gerade Linie mit einem Satz von zwei Paaren von Koordinaten (x, y) ergeben. Was ich denke, ich muss wissen, ist: diese Daten gegeben, wie eine Linie erstellen die gegebene (cx, cy) jedes Paar von Knoten in den 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}); 
} 
}); 

Answer 1

Eigentlich I rechnete aus anderen Beispiel aus:

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