javascript - programacion - ¿Cómo usar la función diagonal D3 para dibujar líneas curvas?

graficos html5

Question

Miré la muestra http://bl.ocks.org/mbostock/raw/4063570/ :

Produce agradables líneas combinadas desde el objetivo de origen de izquierda a derecha.

En mi caso necesito diseñar nodos manualmente y poner coordenadas x, y. En este caso, las líneas no se fusionan en los nodos de origen. Aquí está el código de prueba que reproduce este problema:

var data = [ {name: "p1", children: [{name: "c1"}, {name: "c2"}, {name: "c3"}, {name: "c4"}]}];
var width = 400, height = 200, radius = 10, gap = 50;
// test layout
var nodes = [];
var links = [];
data.forEach(function(d, i) {
d.x = width/4;
d.y = height/2;
nodes.push(d);
d.children.forEach(function(c, i) {
c.x = 3*width/4;
c.y = gap * (i +1) -2*radius;
nodes.push(c);
links.push({source: d, target: c});
})
})
var color = d3.scale.category20();
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var circle = svg.selectAll(".circle")
.data(nodes)
.enter()
.append("g")
.attr("class", "circle");
var el = circle.append("circle")
.attr("cx", function(d) {return d.x})
.attr("cy", function(d) {return d.y})
.attr("r", radius)
.style("fill", function(d) {return color(d.name)})
.append("title").text(function(d) {return d.name});

Hay una muestra de esto en http://jsfiddle.net/zmagdum/qsEbd/ :

Sin embargo, parece que el comportamiento de las curvas cerca de los nodos es opuesto al deseado. Me gustaría que empiecen rectos horizontalmente en los nodos y hagan una curva en el medio. ¿Hay un truco para hacer esto?

Answer 1

Esta solución se basa en la excelente solución de @bmdhacks, sin embargo, creo que la mía es ligeramente mejor, ya que no requiere intercambiar y dentro de los datos en sí.

La idea es que puedes usar diagonal.source() y diagonal.target() para intercambiar x e y :

var diagonal = d3.svg.diagonal()
.source(function(d) { return {"x":d.source.y, "y":d.source.x}; })
.target(function(d) { return {"x":d.target.y, "y":d.target.x}; })
.projection(function(d) { return [d.y, d.x]; });

Todo el intercambio xy ahora está encapsulado dentro del código anterior.

El resultado:

Aquí también está jsfiddle .

Answer 2

Tenga en cuenta que en el ejemplo de bloques, los valores de x e y se intercambian en los enlaces. Esto normalmente dibujaría los enlaces en el lugar equivocado, pero también se le proporcionó una función de proyección que los intercambia.

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

Aquí está su jsfiddle con esta técnica aplicada: http://jsfiddle.net/bmdhacks/qsEbd/5/