我目前正致力于使用与链接here类似的D3.js创建一个sunburst。但是我喜欢我的森伯斯特有点不同。我想过滤掉并且只显示当前根节点上一级的那些弧，而不是显示所有的弧。我在这里通过一个jsfiddle有一个工作版本：https://jsfiddle.net/andrewsolis/7tactp4z/4/。我还附上了我的javascript代码。
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
}]
}]
}]
};
/*
width and height of svg canvas, aspect ratio, and radius of sunburst
*/
var width = 500,
height = 500,
radius = ( Math.min( width, height ) / 2 ) - 10;
/*
show commas for numbers greater then 999 and use decimal notation
https://github.com/d3/d3-format/blob/master/README.md#format
*/
var formatNumber = d3.format(",d");
/*
range of linear scale x: 0 to 2 * Math.PI
https://github.com/d3/d3-scale#linear-scales
*/
var x = d3.scaleLinear()
.range( [ 0, ( 2 * Math.PI ) ] );
/*
range of square root scale y: radius
https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt
*/
var y = d3.scaleSqrt()
.range( [ 0, radius ] );
/*
create an ordinal scale of colors
where each name is correlated to a color
https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal
https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20
*/
var color = d3.scaleOrdinal( d3.schemeCategory20 );
/*
creates a default adjancency diagram which is a space-filling
variant of a node-link tree diagram. Rather than drawing a link between
parent and child in the hierarchy, nodes are drawn as solid areas (either arcs
or rectangles) with placements relative to other nodes
https://github.com/d3/d3-hierarchy/blob/master/README.md#partition
*/
var partition = d3.partition();
/*
creates an arc generator that is used to define how big of a slice a particular
element should take up on the sunburst
https://github.com/d3/d3-shape/blob/master/README.md#arcs
*/
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 ) );
});
/*
creating svg html element with 'width' and 'height' and translating
it to be the middle of the 'g' tag containing the svg
*/
var svg = d3.select("#sunburst_chart")
.attr("width", width )
.attr("height", height )
.append( "g" )
.attr( "transform", "translate(" + ( width / 2 ) + "," + ( height / 2 ) + ")" );
/*
creates a hierarchy root object for d3 where the object
represents the root of all the data and contains properties
that can be used to access the associated 'children' data,
depth of a node, height, height of a node, etc.
https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy
*/
var hierarchy_data = d3.hierarchy( data );
/*
specifies what each datum should use when a specified datum calls it's 'value'
function. The node.value property of each node is set to the numeric value
returned by the specified function plus the combined value of all descendants.
https://github.com/d3/d3-hierarchy#hierarchy
https://github.com/d3/d3-hierarchy#node_eachAfter
*/
hierarchy_data.sum( function( d )
{
return d.size;
});
svg.selectAll( "path" )
/*
Specify the data to use for the svg element, .descendants returns an array
of descendant nodes starting with the root node.
https://github.com/d3/d3-hierarchy/blob/master/README.md#node_descendants
*/
.data( partition( hierarchy_data ).descendants( ) )
.enter()
.filter( function ( d )
{
return d.depth <= 1;
})
.append( "path" )
/*
Use the 'arc' generator to generate slices for each datum given a certain value.
https://github.com/d3/d3-hierarchy#hierarchy
*/
.attr( "d", arc )
/*
Fill the slice with a color based off the color ordinal scale.
https://github.com/d3/d3-shape/blob/master/README.md#arcs
*/
.style( "fill", function( d )
{
return color( ( d.children ? d : d.parent ).data.name );
})
.append( "title" )
.text(function( d )
{
return d.data.name + "\n" + formatNumber( d.value );
});
svg.select("path").attr("id", "centroid");
没有任何互动，这只是我想要的，但是尺寸有问题。如果你检查svg元素是否有旭日，你会发现旭日形的外半径不等于宽度或高度，但是比它包含在内的实际svg元素要小一些。我认为这是因为我的弧线正在进行计算，就好像那里有切片一样，但是这些切片后来被d3.filter函数过滤掉了。考虑到数据被过滤掉，我会喜欢我的森伯斯特占据整个空间。如果我需要提供任何其他信息，请随时与我们联系。
谢谢！
答案 0 :(得分：0)
您可以在viewBox元素中添加svg属性。如果您的最大层次深度为3，则计算最外侧弧的半径，如下所示：
var maxHierarchy = 3;
var depth = 1;
var maxRadius = y((depth + 1) / (maxHierarchy + 1));
var svg = d3.select("#sunburst_chart")
.attr("width", width )
.attr("height", height )
.attr("viewBox", (radius - maxRadius) + "," + (radius - maxRadius) + "," +
(2*maxRadius + 20) + "," + (2*maxRadius + 20))
.append( "g" )
.attr( "transform", "translate(" + ( width / 2 ) + "," + ( height / 2 ) + ")" );
//...
svg.selectAll( "path" )
//...
.filter( function ( d )
{
return d.depth <= depth;
})
//...
（+ 20是你的填充。）