0
我目前正在更新鏈接（https://bl.ocks.org/mbostock/5944371）上的雙層分區示例以使用版本4的d3.js而不是版本3。我不擔心放大和縮小，只關注僅顯示深度爲2和正確值的弧。我有一個工作的jsfiddle其中所有的弧在這裏示出（https://jsfiddle.net/andrewsolis/dgu8Lgpf/）與下面的相同的代碼沿着：d3.js bilevel分區v4 - 更改子項和值函數
<!--
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>
在使用版本3的例子中，一旦數據被在初始佈局讀取被計算並兒童被存儲在每個數據的新變量._children中，並且該值被存儲在每個數據的.sum屬性內。然後重新分配children和value函數，以便.children現在返回._children，但只有當數據的深度小於2，並且值函數現在返回每個數據的.sum。
// 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; });
對於我的jsfiddle我試圖做到哪裏，我想定義.children訪問返回._children如果一個數據的深度小於2，並具有價值函數返回.overallSum的等價物。然而，D3的版本4看起來並不像它支持覆蓋分區的'值'功能或僅返回某些孩子。我正在尋找一種可能的解決方案，以便我可以返回._children變量，並覆蓋「值」函數以返回.sum。任何幫助將不勝感激，如果我需要解釋什麼，請讓我知道。
謝謝。