D3.js:将一个有响应的饼图放在其父分区的中心

D3.js: Centering a responsive pie chart in its parent div

本文关键字：分区 响应 js 一个 D3      更新时间：2023-09-26

我知道当我弄清楚它的时候，我可能会面对手掌，但我正在尝试将响应饼图水平居中（无论它长到什么大小）。我一定是疯了，因为我在挣扎，尽管我知道解决办法应该很简单。

谢谢你可怜我。

在这里打闹。

一些CSS:

.chart-container {
  width:100%;
  height:50%;
  border: 1px dotted silver;
}

您需要删除preserveAspectRatioattr，第19行（反应灵敏的工作）

var svg = d3.select('.chart-container').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
    //.attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");


$(function(){
    var $container = $('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        outerRadius = Math.min(width,height)/2,
        innerRadius = (outerRadius/5)*4,
        fontSize = (Math.min(width,height)/4);
    
    var arc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius)
        .startAngle(0);
    var svg = d3.select('.chart-container').append("svg")
        .attr("width", '100%')
        .attr("height", '100%')
        .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
        //.attr('preserveAspectRatio','xMinYMin')
        .append("g")
        .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
    var text = svg.append("text")
        .text('0%')
        .attr("text-anchor", "middle")
        .style("font-size",fontSize+'px')
        .attr("dy",fontSize/3)
        .attr("dx",2);
    
    var background = svg.append("path")
        .datum({endAngle: τ})
        .style("fill", "#7cc35f")
        .attr("d", arc);
    var foreground = svg.append("path")
        .datum({endAngle: 0 * τ})
        .style("fill", "#57893e")
        .attr("d", arc);
    setInterval(function() {
      foreground.transition()
          .duration(750)
          .call(arcTween, Math.random() * τ);
    }, 1500);
    function arcTween(transition, newAngle) {
        transition.attrTween("d", function(d) {
    
            var interpolate = d3.interpolate(d.endAngle, newAngle);
            
            return function(t) {
                d.endAngle = interpolate(t);
                text.text(Math.round((d.endAngle/τ)*100)+'%');
                return arc(d);
            };
        });
    }
});
html,
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
.chart-container {
  width:100%;
  height:50%;
  border: 1px dotted silver;
}
svg text{
font-size: 1em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="chart-container"></div>

相关文章：