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

标签 d3.js sunburst-diagram

我需要画一个像这样的旭日图:

enter image description here

正如你所看到的,这实际上是旭日图的一个扇区。我可以为主圆/弧设置 startAngle 和 endAngle 吗?

编辑: 我的图是这样的: https://bl.ocks.org/mbostock/4063423

最佳答案

这是您要找的吗?

enter image description here

这是变化的部分:

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

关于d3.js - 使用 d3.js 绘制旭日图的扇区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38138625/

相关文章:

r - 如何在 R sunburst 中为每个类别指定颜色和切换标签?

javascript - D3 圆弧的一侧

javascript - d3-js › 饼图中的质心问题

javascript - 在 d3.js 中使用 x3dom 的 API 或教程?

javascript - D3.js 可缩放旭日不缩放

javascript - 更改 d3 sunburst 图的 json 标签

javascript - 将文本添加到 D3 轴的外部刻度

javascript - 当链接太多时,d3 sankey 插件无法绘制?

python - 如何从 Python 中的字符串列表制作旭日图?

python - plotly : Pandas 数据帧错误:模块 'plotly.express.data' 没有属性