使用d3.js绘制旭日形图的扇区

问题描述

我需要绘制一个朝阳图，像这样:

I need to draw a sunburst diagram like this:

如您所见，这实际上是朝阳图的一个扇区.我可以为主圆/圆弧设置startAngle和endAngle吗?

我的图就像: https://bl.ocks.org/mbostock/4063423

As you can see , this is actually a sector of sunburst diagram. Can I set a startAngle and endAngle for the main circle/arc?

My diagram is like:https://bl.ocks.org/mbostock/4063423

推荐答案

这是您要寻找的吗?

这是不断变化的部分:

var partition = d3.layout.partition()
    .sort(null)
    .size([Math.PI, radius * radius]) // Previoulsy : .size([2 * Math.PI, radius * radius])
    .value(function(d) { return 1; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x - Math.PI / 2; }) // Previously : .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx - Math.PI / 2; }) // Previously : .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

观看现场演示: JSFiddle

See live demo : JSFiddle

这篇关于使用d3.js绘制旭日形图的扇区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！