Árbol D3: líneas en lugar de proyección diagonal

Question

Apr 25, 2013, 02:08 PM

Árbol D3: líneas en lugar de proyección diagonal

Estoy usando d3.js para crear un árbol usandoeste ejemplo.

Esto maneja los datos que tengo perfectamente y produce el resultado deseado, excepto por un detalle: no quiero esosinquieto Líneas conectoras entre los nodos, quiero una línea limpia y sencilla. ¿Alguien me puede mostrar cómo producir eso?

He estado buscando en la documentación de la API para d3.js, pero sin éxito. De lo que entendí, lasvg.line La función debe producir una línea recta dado un conjunto de dos pares de coordenadas (x, y). Lo que creo que necesito saber es: dados estos datos, cómo crear unlínea dado el (cx, cy) de cada par de nodos en elcampo de golf formación:

<pre><code>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});
}
});
</code></pre>