Javascript 无法将D3饼图居中

我试图绘制角度，但出于某种原因，只有最后一个数据点才能获得颜色和显示。我试图翻译svg，但它似乎没有移动

我是D3的新手，所以我确信我做了一些不那么聪明的事情，但我没有意识到。据我所知，g和path元素中的角度是应该的

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];
  });

---

问题是，您正在将饼图的所有扇区追加到

svg

节点，而这些扇区应该追加到已翻译的

g

节点，您有两个选项来解决此问题

• 使

  图表

  等于已翻译的

  g

  节点
• 在所有

  扇区之前选择
  g
  ，并将其存储在
  grx

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

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

---

问题在于，您正在将饼图的所有扇区追加到

svg

节点，而当它们应该追加到已翻译的

g

节点时，您有两个选项来解决此问题

• 使

  图表

  等于已翻译的

  g

  节点
• 在所有

  扇区之前选择
  g
  ，并将其存储在
  grx

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

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

---

是的，我想我看到了。不过，我敢肯定我的作业有问题，因为我们在你的演示中只能看到明亮的橙色太阳。应该是一个饼图。。。我还缺少什么？我想我明白为什么我会得到我所得到的。这是因为下一段的起始角为零。它应该是前一个的结束角。我可以单独问这个问题。对，我想我明白了。不过，我敢肯定我的作业有问题，因为我们在你的演示中只能看到明亮的橙色太阳。应该是一个饼图。。。我还缺少什么？我想我明白为什么我会得到我所得到的。这是因为下一段的起始角为零。它应该是前一个的结束角。我可以单独问这个问题。