Question

我正在尝试构建一个显示一系列实时图形的基本“响应式” Web应用程序。我尝试实现了这种提琴：http://jsfiddle.net/BTfmH/12/，它工作得很好，在第一个图中产生了3个等间距的区域。（我正在使用基本的引导程序容器，行和列）-http://prntscr.com/jy6jzx

当我尝试将饼图更改为折线图时（遵循本教程：https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0），我遇到了一些疯狂的缩放问题。这是我的JS代码，如下所示：

'use strict';

$(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.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", 0);

    var x = d3.scaleTime().rangeRound([0, width]);
    var y = d3.scaleLinear().rangeRound([height, 0]);

    svg.append("g")
      .call(d3.axisLeft(y));

    /*

    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);
            };
        });
    }
    */
});

添加Y轴的结果：https://prnt.sc/jy6lkm

是否有任何指向我做错事情的指针？

D3js +引导程序

0 个答案: