Question

我试图将a circle with different data values作为角度绘制，但出于某种原因，它只是获取颜色和显示的最后一个数据点。我试图翻译svg，但似乎没有让步。

我是D3的新手，所以我确信在没有意识到的情况下我做了一些不太聪明的事情。据我所知， g 和路径元素中的角度应该是这样的。

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

问题在于，当您将饼图的所有扇区附加到else节点时，它们应附加到已翻译的svg节点，您有两种方法可以解决此问题

使g等于已翻译的chart节点
在所有g之前选择g并将其存储在.sectors

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

grx

demo

无法居中D3饼图

1 个答案: