D3JS：创建不同的弧形路径

Question

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

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

ORA-01031 ERROR

弧线就像：

请帮忙。提前谢谢。

Answer 1

我假设gaugeData是弧线总扫描的度数值。因此，第一步是通过创建一个开始/停止角度数组来d3ify您的数据。然后绘图变得容易：

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>

编辑评论

并排放置弧线要容易得多，只需更改每个弧线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>