您可以在 d3 中创建具有不同切片大小的饼图吗？答案

【问题标题】：Can you create a pie chart with varying slice sizes in d3?您可以在 d3 中创建具有不同切片大小的饼图吗？
【发布时间】：2017-05-25 04:02:53
【问题描述】：

我正在尝试在 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中做到这一点吗？如果是这样，我是否走在正确的道路上？谢谢

【问题讨论】：

标签： javascript d3.js wolfram-language

【解决方案1】：

是的，你可以

您缺少的是，您无法直接访问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>

【讨论】：

嘿伙计！只是对您的评论的跟进，我们如何仅在形状的周边添加笔触？（或删除内部笔划）

【解决方案2】：

this Aster Plot 会为您工作吗？

【讨论】：