javascript - 无法将 D3 饼图居中

Question

我正在尝试画画a circle with different data values作为 Angular ，但由于某种原因，只有最后一个数据点获得颜色和显示。我尝试翻译 svg，但似乎没有任何进展。

我对 D3 相当陌生，所以我确信我在没有意识到的情况下做了一些不太聪明的事情。据我所知， g 和 path 元素中的 Angular 与预期一致。

var height = 400, width = 600, radius = Math.min(height, width) / 2;
var colors = ["#red", "pink", "green", "yellow", "blue","magent","brown","olive","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);
chart.append("g")
  .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

问题是，当您将饼图的所有扇区附加到 svg 节点时，它们应该附加到翻译后的 g 节点，您有两个选择解决这个问题

• 使 chart 等于转换后的 g 节点
• 在所有.sectors之前选择g并将其存储在grx

第一个解决方案更简单，例如

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

demo