d3.js - ¿Dónde está d3.svg.diagonal()?

Question

Estaba tratando de ejecutar el código del árbol plegable como se menciona here . Pero parece que el método diagonal no es aplicable en v4 (puedo estar equivocado).

Por:

var diagonal = d3.svg.diagonal()

Me sale este error:

TypeError: Cannot read property ''diagonal'' of undefined

Si es así, ¿cuál es el equiavalente en v4? Mirar la referencia de la API d3.js no me dio ninguna pista.

Answer 1

Vea el tema de GitHub here .

Si bien el problema sigue abierto, no parece que el Sr. Bostock tenga prisa por volver a implementarlo en la versión 4. ¿Por qué? Porque es trivial implementarte a ti mismo:

function link(d) {
return "M" + d.source.y + "," + d.source.x
+ "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
+ " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
+ " " + d.target.y + "," + d.target.x;
}

Answer 2

Actualización : la respuesta aceptada está desactualizada desde que se lanzó D3 v4.9.

D3 versión 4.9.0 introdujo formas de enlace , que tienen la misma funcionalidad que la antigua d3.svg.diagonal en D3 v3.

Según la API :

La forma del enlace genera una curva de Bézier cúbica suave desde un punto de origen a un punto de destino. Las tangentes de la curva al inicio y al final son verticales, horizontales o radiales.

Hay tres métodos:

• d3.linkHorizontal()
• d3.linkVertical()
• d3.linkRadial()

Entonces, para un árbol plegable como el que usted vinculó, define el atributo de ruta d como:

.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));

Demostración :

Supongamos que tiene un objeto con source y target , cada uno con propiedades x e y :

var data = {
source: {
x: 20,
y: 10
},
target: {
x: 280,
y: 100
}
};

Puede dibujar la ruta simplemente pasando esos datos al generador de enlaces:

.attr("d", link(data))

Aquí está la demo:

var svg = d3.select("svg");
var data = {
source: {
x: 20,
y: 10
},
target: {
x: 280,
y: 100
}
};
var link = d3.linkHorizontal()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
svg.append("path")
.attr("d", link(data))
.style("fill", "none")
.style("stroke", "darkslateblue")
.style("stroke-width", "4px");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>