Ich arbeite gerade an der Aktualisierung des Beispiels für eine Bilevel-Partition auf den Link hier (https://bl.ocks.org/mbostock/5944371), um Version 4 von d3.js statt Version 3 zu verwenden. Jetzt gerade ich Ich sorge mich nicht darum herumzuzoomen und nur darauf zu fokussieren, nur Bögen mit einer Tiefe von 2 und mit den richtigen Werten zu zeigen. Ich habe eine Arbeits JSFiddle wo alle Bögen hier dargestellt (https://jsfiddle.net/andrewsolis/dgu8Lgpf/) zusammen mit dem gleichen Code unter:d3.js Bilevel Partition v4 - change Kinder und Wert Funktion
<!--
Attempt at converting bilevelpartition to v4
-->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
cursor: pointer;
}
circle {
fill: none;
pointer-events: all;
}
</style>
<body>
</body>
<!-- d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- jQuery library -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var data = {
"name": "root1",
"children": [
{
"name": "parent1",
"children": [
{
"name": "child1",
"children": [
{
"name": "leaf1",
"size": 100
},
{
"name": "leaf2",
"size": 200
}
]
},
{
"name": "child2",
"children": [
{
"name": "leaf1",
"size": 300
},
{
"name": "leaf2",
"size": 400
}
]
}
]
},
{ "name": "parent2",
"children": [
{
"name": "child1",
"children": [
{
"name": "leaf1",
"size": 100
},
{
"name": "leaf2",
"size": 200
}
]
},
{
"name": "child2",
"children": [
{
"name": "leaf1",
"size": 300
},
{
"name": "leaf2",
"size": 400
}
]
}
]
},
{
"name": "parent3",
"children": [
{
"name": "child1",
"children": [
{
"name": "leaf1",
"size": 100
},
{
"name": "leaf2",
"size": 200
}
]
},
{
"name": "child2",
"children": [
{
"name": "leaf1",
"size": 300
},
{
"name": "leaf2",
"size": 400
}
]
}
]
}
]
};
var width = 900,
height = 800,
radius = (Math.min(width, height)/2) - 10;
var formatNumber = d3.format(",d");
var x = d3.scaleLinear()
.range([0, 2 * Math.PI]);
var y = d3.scaleSqrt()
.range([0, radius]);
var color = d3.scaleOrdinal(d3.schemeCategory20);
var svg = d3.select("body")
.append("svg")
.attr("width", width )
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
var partition = d3.partition();
var arc = d3.arc()
.startAngle( function(d)
{
return Math.max(0, Math.min(2 * Math.PI, x(d.x0)));
})
.endAngle( function(d)
{
return Math.max(0, Math.min(2 * Math.PI, x(d.x1)));
})
.innerRadius(function(d)
{
return Math.max(0, y(d.y0));
})
.outerRadius(function(d)
{
return Math.max(0, y(d.y1));
});
var root = d3.hierarchy(data);
root.sum(function(d)
{
return d.size;
})
.each(function(d)
{
d._children = d.children;
d.overallSum = d.value;
});
svg.selectAll("path")
.data(partition(root).descendants())
.enter()
.append("path")
.attr("d", arc)
.style("fill", function(d)
{
return color(d.data.name);
})
.append("title")
.text(function(d)
{
return d.data.name + "\n" + formatNumber(d.value);
});
</script>
In dem Beispiel, das die Version 3 verwendet, sobald die Daten in dem ersten Layout gelesen werden berechnet und Die untergeordneten Elemente werden in einer neuen Variablen für jedes Datum mit der Bezeichnung ._children gespeichert, und der Wert wird im Attribut .sum des jeweiligen Datums gespeichert. Die Funktionen children und value werden dann neu zugewiesen, sodass .children jetzt ._children zurückgibt, aber nur wenn ein Datum eine Tiefe von weniger als 2 hat und die Wertfunktion jetzt .sum für jedes Datum zurückgibt.
// Compute the initial layout on the entire tree to sum sizes.
// Also compute the full name and fill color for each node,
// and stash the children so they can be restored as we descend.
partition
.value(function(d) { return d.size; })
.nodes(root)
.forEach(function(d) {
d._children = d.children;
d.sum = d.value;
d.key = key(d);
d.fill = fill(d);
});
// Now redefine the value function to use the previously-computed sum.
partition
.children(function(d, depth) { return depth < 2 ? d._children : null; })
.value(function(d) { return d.sum; });
Für meine JSFiddle Ich versuche, das Äquivalent zu tun, wo ich die .children Accessor definieren bin zu wollen ._children zurück, wenn ein Datum mit einer Tiefe von weniger als 2 hat, und den Wert Funktion Rückkehr .overallSum. Version 4 von D3 sieht jedoch nicht so aus, als ob es das Überschreiben der Wertfunktion für eine Partition oder das Zurückgeben nur bestimmter untergeordneter Elemente unterstützt. Ich suche nach einer möglichen Lösung, damit ich die ._children Variable stattdessen zurückgeben kann, und überschreibe die "Wert" Funktion, um .sum zurückzugeben. Jede Hilfe wird sehr geschätzt, wenn ich etwas anderes erklären muss, lass es mich wissen.
Danke.