javascript - D3.js:将响应式饼图在其父div中居中

我知道弄清楚时可能会碰到手掌，但是我试图将响应式饼图水平居中(无论它增长到什么大小)。即使我知道解决方案应该很简单，但我仍在努力奋斗，因此必须为之疯狂。

谢谢你对我的怜悯。

Fiddle here.

一些CSS:

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

最佳答案

您需要删除第19行的prepareAspectRatio属性(响应式工作)。

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>

关于javascript - D3.js:将响应式饼图在其父div中居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37096254/