D3JS：创建不同的弧线路径

Question

我正在尝试绘制与数据对应的弧线。 Plnkr

实际上数据中有两个数字。每当我试图创建两个弧，他们合并在一起。

var pi = Math.PI, arcRadius = 55, arcThickness = 2; 
var gaugeData = [32, 57]; 
var svg = d3.select('.circles').append('svg'); 

var arcFunc = d3.svg.arc() 
    .innerRadius(55) 
    .outerRadius(57) 
    .startAngle(0) 
    .endAngle(function(d) { return d * (pi /180); }); 

svg.attr("width", "400").attr("height", "400") 
    .selectAll('path').data(gaugeData).enter().append('path') 
    .attr('d', function(d) { return arcFunc(d); }) 
    .attr('fill', '#555') 
    .attr('cx', function(d, i) { return i * 100 + 30; }) 
    .attr('cy', function(){ return 50; }) 
    .attr("transform", "translate(200,200)"); 

的弧线会是这样：

请帮助。提前致谢。

Answer 1

我假设gaugeData是整个弧度扫描的度数值。所以，第一步是通过创建一个开始/停止角度的数组来减少数据。然后将绘图变得容易：

var pi = Math.PI, arcRadius = 55, arcThickness = 2; 
 
var gaugeData = [32, 57, 180]; 
 
var svg = d3.select('body').append('svg'); 
 

 
var data = gaugeData.map(function(d,i){ 
 
    var start = 0; 
 
    for (var j = 0; j < i; j++){ 
 
    start += gaugeData[j]; // start angle value is the sum of all the sweeps before it 
 
    } 
 
    var end = start + d; // end angle is the start + sweep 
 
    return { 
 
    start: start, 
 
    end: end 
 
    }; 
 
}); 
 

 
var colors = d3.scale.category10(); 
 

 
var arcFunc = d3.svg.arc() 
 
    .innerRadius(55) 
 
    .outerRadius(57) 
 
    .startAngle(function(d) { return d.start * (pi /180); }) 
 
    .endAngle(function(d) { return d.end * (pi /180); }); 
 

 
svg.attr("width", "400").attr("height", "400") 
 
    .selectAll('path').data(data).enter().append('path') 
 
    .attr('d', function(d) { return arcFunc(d); }) 
 
    .attr('fill', function(d,i){ return colors(i); }) 
 
    .attr("transform", "translate(200,200)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

---

EDITS注解

把弧并排一边是轻松了很多，只是改变了transform每个一。还要注意，cx和cy是无效的path：

var pi = Math.PI, arcRadius = 55, arcThickness = 2; 
 
var gaugeData = [32, 57, 180]; 
 
var svg = d3.select('body').append('svg'); 
 

 
var colors = d3.scale.category10(); 
 

 
var arcFunc = d3.svg.arc() 
 
    .innerRadius(55) 
 
    .outerRadius(57) 
 
    .startAngle(function(d) { return 0; }) 
 
    .endAngle(function(d) { return d * (pi /180); }); 
 

 
svg.attr("width", "400").attr("height", "400") 
 
    .selectAll('path').data(gaugeData).enter().append('path') 
 
    .attr('d', function(d) { return arcFunc(d); }) 
 
    .attr('fill', function(d,i){ return colors(i); }) 
 
    .attr("transform", function(d,i){ 
 
     return "translate("+ ((i * 75) + 10) + ",75)"; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>