web-dev-qa-db-fra.com

Où se trouve d3.svg.diagonal ()?

J'essayais d'exécuter le code de pliable-tree comme mentionné ici . Mais il semble que la méthode diagonale ne soit pas applicable en v4 (je peux me tromper).

Pour:

var diagonal = d3.svg.diagonal()

Je reçois cette erreur:

TypeError: Impossible de lire la propriété "diagonale" de non défini

Quel est l'équivalent en v4? La consultation de la référence de l'API d3.js ne m'a donné aucun indice.

javascriptd3.jssvg
29
Mopparthy Ravindranath

Mise à jour: la réponse acceptée est obsolète depuis la sortie de D3 v4.9.

Introduction de la version 4.9.0 de D3 formes de liens , qui ont les mêmes fonctionnalités que l'ancien d3.svg.diagonal dans D3 v3.

Selon API :

La forme du lien génère une courbe de Bézier cubique lisse d'un point source à un point cible. Les tangentes de la courbe au début et à la fin sont verticales, horizontales ou radiales.

Il existe trois méthodes:

Ainsi, pour un arbre pliable comme celui que vous avez lié, vous définissez l'attribut path d comme:

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

Démo :

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

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

Tout d'abord, vous créez le générateur de liens:

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 ces données au générateur de liens:

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

Voici la démo:

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>
33
Gerardo Furtado

Voir problème GitHub ici .

Bien que le problème soit toujours ouvert, il ne semble pas que M. Bostock soit pressé de le réimplémenter dans la version 4. Pourquoi? Parce qu'il est trivial de vous implémenter:

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;
}
19
Mark

J'ai eu beaucoup de mal avec ça et puis après quelques heures, j'ai réalisé à quel point c'est vraiment facile (comme tout le monde qui le mentionne). Remplacer:

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

...avec ça:

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;
};

Ce devrait être le seul changement. J'espère que cela aide quelqu'un d'autre. Cela devrait fonctionner avec une visualisation comme Arbre réductible/consultable de Patrick Brockman .

0
Pete Adam Bialecki