Où est la d3.svg.diagonale()?

mise à Jour: le accepté de répondre à est périmée depuis D3 v4.9 a été publiée.

D3 version 4.9.0 introduit lier les formes, qui ont la même fonctionnalité de l'ancien d3.svg.diagonal en D3 v3.

Selon la API:

Le lien de la forme génère une cubique lisse courbe de Bézier à partir d'un point source à un point cible. Les tangentes de la courbe, au début et à la fin sont soit à la verticale, à l'horizontale ou radial.

Il existe trois méthodes:

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

Ainsi, pour un réductible arbre comme celui-là vous vous êtes connecté, vous devez définir le chemin d caractéristique:

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

Démo:

Supposons que vous avez un objet avec source et target, chacun avec x et y propriétés:

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

D'abord, vous créez le générateur de lien:

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

Et puis vous pouvez dessiner le chemin juste en passant que les données pour le générateur de lien:

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

Voici la démo:

JS:

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

HTML:

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

J'ai eu un moment difficile avec cela et puis après quelques heures, j'ai réalisé à quel point il facile est vraiment (comme tout le monde qui en parle). Remplacer:

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

...avec ceci:

var diagonal = 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;
};

Que devrait être le seul changement. Espérons que cela aide quelqu'un d'autre. Cela devrait aussi fonctionner avec un système de visualisation comme Patrick Brockman Pliable/Consultable Arbre.