SVG元素中的中心饼图

Question

我已经读过：

1. https://bl.ocks.org/mbostock/3887235
2. http://zeroviscosity.com/d3-js-step-by-step/step-1-a-basic-pie-chart
3. Center align a pie chart on svg

请考虑以下事项：

＆＃13;
＆＃13;
var dataAsCsv = `Col1,Col2
Type1,123456
Type2,789012
Type3,34567`;

var data = d3.csvParse(dataAsCsv);

var margin = {top: 50, right: 20, bottom: 50, left: 80},
    width = 1400 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

var svgPie = d3.select('body').append('svg')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);
			
var gPie = svgPie.append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		   
var radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal(d3.schemeCategory20b);
			
var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.pie()
			.value(function(d) { return d.Col2; })
			.sort(null);

var arc = gPie.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");
	  
arc.append("path")
      .attr("d", path)
      .attr("fill", function(d) { return color(d.data.Col1); });
	  
arc.append("text")
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", "0.35em")
      .text(function(d) { return d.data.Col1; });
＆＃13;
<script src="https://d3js.org/d3.v4.js"></script>
＆＃13;
＆＃13;
＆＃13;

我试图将饼图相对于它所在的整个svg元素垂直和水平居中。我尝试将我的代码修改为上面的例子无济于事。

Answer 1

您只需要将父g元素水平和半高垂直平移半宽：

而不是：

var gPie = svgPie.append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

写：

var gPie = svgPie.append("g")
           .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

查看演示：

＆＃13;

＆＃13;

var dataAsCsv = `Col1,Col2
Type1,123456
Type2,789012
Type3,34567`;

var data = d3.csvParse(dataAsCsv);

var margin = {top: 50, right: 20, bottom: 50, left: 80},
    width = 1400 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

var svgPie = d3.select('body').append('svg')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);
			
var gPie = svgPie.append("g")
           .attr("transform", "translate(" + width/2 + "," + height/2 + ")");
		   
var radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal(d3.schemeCategory20b);
			
var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.pie()
			.value(function(d) { return d.Col2; })
			.sort(null);

var arc = gPie.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");
	  
arc.append("path")
      .attr("d", path)
      .attr("fill", function(d) { return color(d.data.Col1); });
	  
arc.append("text")
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", "0.35em")
      .text(function(d) { return d.data.Col1; });

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>

＆＃13;

＆＃13;

＆＃13;