web-dev-qa-db-fra.com

Comment créer une arborescence à l'aide de données JSON dans d3.v4 - sans stratifier ()

J'essaie de mettre à jour du code d3 de la v3 vers la version 4. J'ai un diagramme d'arbre utilisant des données JSON. Les exemples d3.v4 montrent comment convertir des données tabulaires (par exemple flare.csv) en données hiérarchiques à l'aide de stratify () https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04 . Mais mes données sont JSON, donc je ne veux pas ou je n'ai pas besoin de stratifier (). Je reçois cette erreur:

undefined n'est pas une fonction (évaluant 'root.eachBefore')

exécuter ce code:

var height = 200;
var width = 500;

var xNudge = 50;
var yNudge = 20;

var tree = d3.tree()
    .size([height, width]);

var svg = d3.select("body").append("svg").attr("width","100%").attr("height","100%");
var chartGroup = svg.append("g").attr("transform","translate(50,200) rotate(-90)");

d3.json("treeData.json", function(treeData) {


    var root = treeData[0];
    tree(root);
    console.log('hello');//doesn't log to console, i.e. error occurs beforehand
}

treeData.json:

[
  {
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}
]

Est-il réellement possible de créer une arborescence dans d3.v4 sans utiliser stratifier, c'est-à-dire en utilisant des données déjà hiérarchiques? Est-ce que quelqu'un connaît un exemple ou peut repérer le problème dans mon code? Merci

jsond3.jstreed3v4
13
emma

J'ai eu le même problème. réponse d'Emma y a essentiellement répondu, mais j'ai toujours eu du mal à le faire fonctionner correctement. Je vais élaborer un peu au cas où quelqu'un pourrait le trouver utile. J'ai créé un bloc montrant le résultat fonctionnel ici , qui est basé sur vos données d'exemple ci-dessus, réponse d'Emma , et ce bloc.

La réponse est en trois parties:

  • Votre objet JSON est entouré de crochets de tableau. Soit supprimer ces crochets (comme je l'ai fait dans le Gist), soit mettre un [0] à la fin de votre treeData (comme Emma l'a fait dans le lien ci-dessus) pour extraire l'objet de ce tableau à 1 élément.
  • Passez votre objet JSON à d3.hierarchy (comme Emma l'a expliqué).
  • Enfin, l'API semble avoir changé pour nommer les nœuds, ce qui est également pris en charge dans mon bloc lié ci-dessus.

Pour plus de commodité, voici le code de le bloc que j'ai fait :

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(60,0)");

var tree = d3.cluster()
    .size([height, width - 160]);

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.json("treeData.json", function(error, treeData) {
  if (error) throw error;

  var root = d3.hierarchy(treeData);
  tree(root);

  var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 100) + "," + d.x
            + " " + (d.parent.y + 100) + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

  var node = g.selectAll(".node")
      .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { 
        return "translate(" + d.y + "," + d.x + ")"; 
      })

  node.append("circle")
      .attr("r", 2.5);

  node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { 
        return d.data.name;
      });
});

et voici treeData.json supprimé du tableau:

{
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}
8
mgig

Vous devez exécuter d3.hierarchy sur vos données pour les préparer à l'arborescence (). Stratify exécute probablement la hiérarchie ou est similaire d'une certaine manière. Modifiez donc la ligne appropriée en: var root = d3.hierarchy (treeData [0]);

8
emma