您可以在d3中創建具有不同切片尺寸的餅圖嗎？

Question

我想在d3中製作類似Wolfram's SectorChart的東西（https://reference.wolfram.com/language/ref/Files/SectorChart.en/O_5.png）。我目前使用的

[ { 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中做到這一點？如果是這樣，我在正確的道路上？謝謝

Answer 1

是的，你可以

你缺少的是，因爲餡餅佈局應用於數據，其中舊數據包到data屬性，你不能直接訪問d.radius，所以你的代碼應該是這樣的這

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>

Answer 2

請問this Aster Plot是否適合您？