J'essaie de créer un graphique dirigé par la force avec une torsion: les données de nœud et de lien proviennent de classes définies en externe. Quand je l'exécute, je reçois le message redouté et familier:

Uncaught TypeError: Cannot read property 'weight' of undefined

J'ai lu d3: Impossible de lire la propriété 'weight' d'undefined dans l'implémentation d3.force et l'excellent https://stackoverflow.com/a/15060978/558639 . Mais pas de joie.

J'ai créé un JSFiddle dans https://jsfiddle.net/3xcaqaLc/8/ qui fidèlement réplique l'erreur.

Ce que j'ai essayé

Les documents mentionnent une propriété «poids» sur les liens, mais il n'était pas particulièrement clair si je devais fournir cela.

J'ai ajouté une propriété weight: 1.0 à chaque lien. Pas de joie.

J'ai ajouté une propriété weight: 1.0 à chaque nœud. Pas de joie.

Ce que je n'ai pas essayé

Tous les exemples que j'ai trouvés montrent les liens construits avec des index de base zéro dans le tableau des nœuds. Au lieu de cela, je construis les liens avec des références aux nœuds eux-mêmes. Mais selon la documentation de #force.nodes(), cela devrait fonctionner (notez l'utilisation du mot 'peut'):

Remarque: les valeurs des attributs source et cible peuvent être initialement spécifiées sous forme d'index dans le tableau de nœuds; ceux-ci seront remplacés par des références après l'appel à démarrer.

Les documents sont peut-être inexacts, mais les solutions seront les bienvenues!

2
fearless_fool 10 mars 2016 à 04:47

3 réponses

Meilleure réponse

La vraie raison est que le lien g_graph.links n'est pas au bon format comme mentionné dans https://github.com/mbostock/d3/wiki/Force-Layout#links

Il en va de même avec les nœuds https://github.com/mbostock/d3/wiki/Force-Layout#nodes

C'est la raison pour laquelle la disposition forcée ne fonctionne pas.

J'ai commenté les nœuds et la section de lien et le graphique est dessiné parce que la fonction de tick place le nœud et le lien.

  var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([view_width, view_height])
    //.nodes(g_graph.nodes)
    //.links(g_graph.links)
    .start();

Exemple de travail ici

J'espère que cela t'aides!

1
Cyril Cherian 10 mars 2016 à 02:16

J'ai eu le même problème et commenter .node() et .links() que dans la réponse acceptée a conduit à un graphique vide. J'ai donc fait deux choses:

  1. Version d3 rétrogradée à http://d3js.org/d3.v3.js cause v. 4 semble être totalement incompatible avec toutes ces choses, non scale, layout, etc.
  2. changé les start et end accessoires de mes liens en source et target respectivement

Voilà, pas besoin d'ajouter weight

0
vladkras 30 mars 2017 à 07:54

Pendant que @RobG donnait sa réponse utile, je l'ai trouvée à l'aide du débogueur Chrome. Rétrospectivement, c'est assez évident.

Les opérations link de d3 s'attendent à ce que le lien ait des propriétés .source et .target, et non des propriétés ._lh et ._rh définies par ma classe Link.

Le correctif consistait à mapper ._lh et ._rh à .source et .target à l'initialisation, essentiellement:

var my_links = links.map(function(lnk) {return {source:lnk._lh, target:lnk._rh}})

Jsfiddle mis à jour (et fonctionnel) dans https://jsfiddle.net/3xcaqaLc/9/

0
fearless_fool 10 mars 2016 à 02:15