【发布时间】：2017-06-29 14:19:26
【问题描述】：
我目前正在更新此处链接 (https://bl.ocks.org/mbostock/5944371) 中的双层分区示例，以使用 d3.js 的第 4 版而不是第 3 版。现在我不担心放大和缩小，并且只关注仅显示深度为 2 且具有正确值的弧。我有一个有效的 JSFiddle，所有的弧都显示在这里 (https://jsfiddle.net/andrewsolis/dgu8Lgpf/) 以及下面的相同代码：
<!--
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，如果基准的深度小于 2，我想定义 .children 访问器以返回 ._children，并让值函数返回 .overallSum。但是，D3 的第 4 版看起来不支持覆盖分区的“值”函数或仅返回某些子项。我正在寻找一种可能的解决方案，以便我可以返回 ._children 变量，并覆盖“值”函数以返回 .sum。任何帮助将不胜感激，如果我需要解释其他任何事情，请告诉我。
谢谢。
【问题讨论】：
标签： javascript d3.js svg