Не удалось центрировать D3 круговую диаграмму

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

Проблема заключается в том, что вы добавив все сектора пирога с svg узла, когда они должны быть добавленным к переведенной g узла, у вас есть два варианта, чтобы решить эту проблему

• сделать chart равным переведенного g узла
• выберите g перед всеми .sectors и хранить, что в grx

Первое решение проще, например.

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

demo