Как да създам оформление на дърво, използвайки JSON данни в d3.v4 - без stratify () - json, d3.js, tree, d3v4

Аз се опитвам да актуализирам някой d3 код от v3 доверсия 4. Имам дървовидна диаграма, използваща JSON данни. Примерите на d3.v4 показват как да конвертирате таблични данни (напр. Flare.csv) в йерархични данни чрез stratify () https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04, Но моите данни са JSON, така че не искам или се нуждая от stratify (). Получавам тази грешка:

undefined не е функция (оценява "root.eachBefore")

този код се изпълнява:

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

Възможно ли е да създадете дървовидна структурав d3.v4 без използване на stratify, т.е. използване на данни, които вече са йерархични? Някой знае ли за пример, или може да забележите проблема в моя код? Благодаря

Отговори:

Имах същия проблем. Отговорът на Ема по същество отговори, но все още имах проблеми с работата му. Ще изработя малко в случай, че някой може да го намери за полезен тук, който се основава на примерните Ви данни по-горе, Отговорът на Ема, и това блок.

Отговорът е три части:

• Обектът ви JSON е опакован в скоби на Array. Или премахнете тези скоби (както направих в същността), или сложете a [0] в края на вашите treeData (както е направил Ема в връзката по-горе), за да получите обекта от този 1 елемент Array.
• Предайте JSON обекта на d3.hierarchy (както обяснява Ема).
• На последно място, API изглежда е променен за именуване на възлите, за които се грижи и моят блок, свързан по-горе.

За удобство, тук е кодът от блокът, който направих:

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

и тук " 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"
}
]
}

Трябва да изпълните d3.йерархията на данните ви, за да я подготвите за дърво (). Стратификацията вероятно върви в йерархия или е подобна по някакъв начин. Така променете съответния ред на: var root = d3.hierarchy (treeData [0]);