Question

绘制饼图时，我的扇区重叠。当我使用取景器工具悬停时，我可以看到每个扇区从零开始（而它应该从前一个元素的结束角度开始）。此外，似乎扇区的大小是累积的（1,2,4的数据给出了权重1,3,7的扇区）。我在fiddle here中得到了它。

var height = 400, width = 600, radius = Math.min(height, width) / 2;
var colors = ["red", "pink", "green", "yellow", 
              "blue","magenta","brown","olive","fuchsia","orange"];
var data = [1,2,1,2,1,2,1,3,1];

var chart = d3.select("#chart").append("svg")
  .attr("width", width).attr("height", height)
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var pie = d3.layout.pie().sort(null).value(function (d) { return d; });
var arc = d3.svg.arc().startAngle(0).innerRadius(0).outerRadius(radius);

var grx = chart.selectAll(".sector").data(pie(data))
  .enter().append("g").attr("class", "sector");

grx.append("path")
  .attr("d", arc)
  .style("fill", function (d, i) {
    console.log(d);
    return colors[i];
  });

Answer 1

您在每个数据点将起始角度设置为零。它被重新计算并跨越零到任意的角度。如果你没有指定起始角度，它将默认设置为前一个元素的结束角度。

var pie = d3.layout.pie().sort(null).value(function (d) { return d; });
var arc = d3.svg.arc().innerRadius(0).outerRadius(radius);

绘制弧时，无法在D3中创建非重叠扇区

1 个答案: