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>