我正在尝试在 d3 ( https://reference.wolfram.com/language/ref/Files/SectorChart.en/O_5.png ) 中制作类似 Wolfram 的 SectorChart 的东西。我目前使用的基本数据集为
[ { label:0, radius:1 }, { label:1, radius:1 }, { label:2, radius:2 }];
我正在尝试使用以下函数改变圆弧的外半径
var arc = d3.arc()
.innerRadius(0)
.outerRadius(function(d) { return d.radius * 100; })
但这不起作用。在 d3 中是否可以做到这一点?如果是这样,我走的路正确吗?谢谢
最佳答案
是的,你可以
您缺少的是,您无法直接访问d.radius
,因为饼图布局应用于数据,它将旧数据包装到data
属性,所以你的代码应该是这样的
var arc = d3.arc()
.innerRadius(0)
.outerRadius(function(d) { return d.data.radius * 100; })
fiddle
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(function (d,i) {
return d.data.radius*100
});
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.radius; });
var svg = d3.select('#result').append('svg').attr('width',500).attr('height',500)
svg.selectAll('path')
.data(pie([{ label:0, radius:1 }, { label:1, radius:1 }, { label:2, radius:2 }]))
.enter()
.append('path')
.attr('d',arc)
.attr('transform','translate(250,250)')
.attr('fill','yellow')
.attr('stroke','black')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='result'>
</div>
关于javascript - 您可以在 d3 中创建具有不同切片大小的饼图吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44166584/