Question

我有一个代码，用于创建条形图并在每一定时间内更新它。我使用d3.v3.min.js时代码工作正常，但当我使用d3.v4.min.js代码时，代码无法运行。使用d3.v4.min.js对于代码的其他部分至关重要。这是完整的例子：

<html>
    <head>
        <meta charset='ISO-8859-1'>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>

    <body style='background-color:lightgray'>
        <div id="chart" style='width: 400px; height: 400px; padding-left: 5px; padding-bottom: 5px;'></div>

        <script>
      var width = 400, height = 350;
var margin = {top: 20, right: 20, left: 40, bottom: 20};
var categoryIndent = 4*15 + 5, defaultBarWidth = 2000;

        var svg = d3.select("#chart").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var x = d3.scale.linear()
        .domain([0,defaultBarWidth])
        .range([0,width]);
var y = d3.scale.ordinal()
        .rangeRoundBands([0, height], 0.1, 0);

     updateBarPlot(); 

      function updateBarPlot(){ 
        var Cn0 = [{"key" : 2, "value" : Math.round(Math.random() * 20)}, {"key" : 5, "value" : Math.round(Math.random() * 20)}, {"key" : 10, "value" : Math.round(Math.random() * 20)}];

    y.domain(Cn0.sort(function(a,b){
        return b.value - a.value;
      }).map(function(d) { return d.key; }));
    var barmax = d3.max(Cn0, function(e) {
        return e.value;
      });
    x.domain([0,barmax]);

    var chartRow = svg.selectAll("g.chartRow")
        .data(Cn0, function(d){ return d.key});

    var newRow = chartRow
        .enter()
        .append("g")
        .attr("class", "chartRow")
        .attr("transform", "translate(0," + height + margin.top + margin.bottom + ")");

    newRow.insert("rect")
        .attr("class","bar")
        .attr("x", 0)
        .attr("opacity",0)
        .attr("height", y.rangeBand())
        .attr("width", function(d) { return x(d.value);})
        .style("fill","steelblue" );

    newRow.append("text")
        .attr("class","label")
        .attr("y", y.rangeBand()/2)
        .attr("x",0)
        .attr("opacity",0)
        .attr("dy",".35em")
        .attr("dx","0.5em")
        .attr("fill","white")
        .text(function(d){return d.value;});

    newRow.append("text")
        .attr("class","category")
        .attr("text-overflow","ellipsis")
        .attr("y", y.rangeBand()/2)
        .attr("x",categoryIndent)
        .attr("opacity",0)
        .attr("dy",".35em")
        .attr("dx","0.5em")
        .attr("fill","white")
        .text(function(d){return "G" + d.key});

    chartRow.select(".bar").transition()
        .duration(500)
        .attr("width", function(d) { return x(d.value);})
        .attr("opacity",1);

    chartRow.select(".label").transition()
        .duration(500)
        .attr("opacity",1)
        .tween("text", function(d) { 
            var i = d3.interpolate(+this.textContent.replace(/\,/g,''), +d.value);
            return function(t) {
                this.textContent = Math.round(i(t));
            };
        });

    chartRow.select(".category").transition()
        .duration(500)
        .attr("opacity",1);

    chartRow.exit().transition()
        .style("opacity","0")
        .attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")")
        .remove();

    var delay = function(d, i) { return 200 + i * 30; };

    chartRow.transition()
        .delay(delay)
        .duration(900)
        .attr("transform", function(d){ return "translate(0," + y(d.key) + ")"; });

     setTimeout(updateBarPlot, 1000);   

}
        </script>

    </body>
</html>

如您所见，我会在每次转换时更新条形图的值。当我尝试使用d3.v4.min.js标签值停止更新时，它会卡在第一次在那里的第一个值。可能是什么问题以及如何解决这个问题？

在<head>中的主要代码中，我导入了两个d3版本：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="https://d3js.org/d3.v4.min.js"></script>

有什么办法可以解决吗？有任何想法吗？任何帮助将不胜感激，谢谢。

条形图转换不适用于D3.js v4

0 个答案: