Come posso creare un layout ad albero usando i dati JSON in d3.v4 - senza stratify () - json, d3.js, tree, d3v4

Sto cercando di aggiornare qualche codice d3 da v3 aversione 4. Ho un diagramma ad albero usando i dati JSON. Gli esempi d3.v4 mostrano come convertire i dati tabulari (ad es. Flare.csv) in dati gerarchici usando stratify () https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04. Ma i miei dati sono JSON quindi non desidero o ho bisogno di stratify (). Ricevo questo errore:

non definito non è una funzione (valutazione di "root.eachBefore")

eseguendo questo codice:

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"
}
]
}
]

È effettivamente possibile creare un layout ad alberoin d3.v4 senza usare stratify, cioè utilizzando dati che sono già gerarchici? Qualcuno sa di un esempio o può individuare il problema nel mio codice? Grazie

risposte:

Ho avuto lo stesso problema. La risposta di Emma essenzialmente ha risposto, ma ho ancora avuto problemi a farlo funzionare correttamente. Ne elencherò un po 'nel caso qualcuno possa trovarlo utile.Ho creato un blocco che mostra il risultato funzionale Qui, che si basa sui dati di esempio sopra, La risposta di Emma, e Questo bloccare.

La risposta è di tre parti:

• Hai il tuo oggetto JSON avvolto nelle parentesi dell'Array. O rimuovere quelle parentesi (come ho fatto nel senso), o mettere un [0] alla fine del tuo treeData (come ha fatto Emma nel link sopra) per estrarre l'oggetto da quella matrice di 1 elemento.
• Passa il tuo oggetto JSON a d3.hierarchy (come ha spiegato Emma).
• Infine, sembra che l'API sia cambiata per la denominazione dei nodi, anch'essa curata nel mio blocco collegato sopra.

Per comodità, ecco il codice da il blocco che ho fatto:

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

e qui "s treeData.json rimosso dalla matrice:

{
"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"
}
]
}

Devi eseguire d3.gerarchia sui tuoi dati per averla pronta per tree (). Stratify presumibilmente esegue la gerarchia o è simile in qualche modo. Quindi cambia la linea appropriata a: var root = d3.hierarchy (treeData [0]);