我正在尝试在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; })


小提琴



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>

09-16 16:29