Question

我的代码怎么了？为什么折线图动画不能平滑连续？

我正在使用最新的d3.js v5。动画看起来很滞后真的很奇怪，我似乎无法弄清楚如何使它具有平滑的过渡。

这是我的代码：

<html>
<head>
    <title>Test</title>
    <script src="https://d3js.org/d3.v5.js"></script>
    <style>
        path {
            stroke: steelblue;
            stroke-width: 1;
            fill: none;
        }
    </style>
</head>
<body>

<p>
    <b>Size:</b> 300x30 &nbsp;&nbsp;<b>Interpolation:</b> basis &nbsp;&nbsp;<b>Animation:</b> true &nbsp;&nbsp;<b>Transition:</b>
    1000ms &nbsp;&nbsp;<b>Update Frequency:</b> 1000ms
<div id="graph1" class="aGraph" style="width:300px; height:30px;"></div>
</p>
<script>

    function displayGraphExample(id, width, height, updateDelay, transitionDelay) {
        var graph = d3.select(id)
            .append("svg:svg")
            .attr("width", "100%")
            .attr("height", "100%");
        var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
        var x = d3.scaleLinear().domain([0, d3.max(data) * 5]).range([-5, width]);
        var y = d3.scaleLinear().domain([0, 10]).range([0, height]);
        var line = d3.line()
            .x(function (d, i) {
                return x(i);
            })
            .y(function (d) {
                return y(d);
            })
            .curve(d3.curveBasis);
        graph.append("svg:path").attr("d", line(data));
        function redrawWithAnimation() {
            graph.selectAll("path")
                .data([data])
                .attr("transform", "translate(" + x(1) + ")")
                .attr("d", line) 
                .transition() 
                .ease(d3.easeLinear)
                .duration(transitionDelay)
                .attr("transform", "translate(" + x(0) + ")");
        }
        d3.interval(function() {
           var v = data.shift(); 
           data.push(v); 
        	   redrawWithAnimation();
        }, updateDelay);
    }

    displayGraphExample("#graph1", 300, 30, 1000, 1000);
</script>

</body>
</html>

Answer 1

这里的问题是您为updateDelay和transitionDelay设置了完全相同的值。因此，您要在上一个过渡结束之前调用过渡，这样可以有效地取消当前过渡。

简单而幼稚的解决方案将updateDelay稍微增加了一点。例如，再增加50毫秒：

<html>
<head>
    <title>Test</title>
    <script src="https://d3js.org/d3.v5.js"></script>
    <style>
        path {
            stroke: steelblue;
            stroke-width: 1;
            fill: none;
        }
    </style>
</head>
<body>

<p>
    <b>Size:</b> 300x30 &nbsp;&nbsp;<b>Interpolation:</b> basis &nbsp;&nbsp;<b>Animation:</b> true &nbsp;&nbsp;<b>Transition:</b>
    1000ms &nbsp;&nbsp;<b>Update Frequency:</b> 1000ms
<div id="graph1" class="aGraph" style="width:300px; height:30px;"></div>
</p>
<script>

    function displayGraphExample(id, width, height, updateDelay, transitionDelay) {
        var graph = d3.select(id)
            .append("svg:svg")
            .attr("width", "100%")
            .attr("height", "100%");
        var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
        var x = d3.scaleLinear().domain([0, d3.max(data) * 5]).range([-5, width]);
        var y = d3.scaleLinear().domain([0, 10]).range([0, height]);
        var line = d3.line()
            .x(function (d, i) {
                return x(i);
            })
            .y(function (d) {
                return y(d);
            })
            .curve(d3.curveBasis);
        graph.append("svg:path").attr("d", line(data));
        function redrawWithAnimation() {
            graph.selectAll("path")
                .data([data])
                .attr("transform", "translate(" + x(1) + ")")
                .attr("d", line) 
                .transition() 
                .ease(d3.easeLinear)
                .duration(transitionDelay)
                .attr("transform", "translate(" + x(0) + ")");
        }
        d3.interval(function() {
           var v = data.shift(); 
           data.push(v); 
        	   redrawWithAnimation();
        }, updateDelay);
    }

    displayGraphExample("#graph1", 300, 30, 1050, 1000);
</script>

</body>
</html>

但是，这不是最佳方法：惯用的解决方案是在最后一个结束时调用新的过渡。例如：

.on("end", function() {
    var v = data.shift();
    data.push(v);
    redrawWithAnimation();
});

这样，我们就不必猜测或玩弄魔术数字和值了，这可能会出错：转换本身会在完成时调用您想要的任何函数。

这是演示：

<html>

<head>
  <title>Test</title>
  <script src="https://d3js.org/d3.v5.js"></script>
  <style>
    path {
      stroke: steelblue;
      stroke-width: 1;
      fill: none;
    }
  </style>
</head>

<body>

  <p>
    <b>Size:</b> 300x30 &nbsp;&nbsp;<b>Interpolation:</b> basis &nbsp;&nbsp;<b>Animation:</b> true &nbsp;&nbsp;<b>Transition:</b> 1000ms &nbsp;&nbsp;<b>Update Frequency:</b> 1000ms
    <div id="graph1" class="aGraph" style="width:300px; height:30px;"></div>
  </p>
  <script>
    function displayGraphExample(id, width, height, updateDelay, transitionDelay) {
      var graph = d3.select(id)
        .append("svg:svg")
        .attr("width", "100%")
        .attr("height", "100%");
      var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
      var x = d3.scaleLinear().domain([0, d3.max(data) * 5]).range([-5, width]);
      var y = d3.scaleLinear().domain([0, 10]).range([0, height]);
      var line = d3.line()
        .x(function(d, i) {
          return x(i);
        })
        .y(function(d) {
          return y(d);
        })
        .curve(d3.curveBasis);
      graph.append("svg:path").attr("d", line(data));
      redrawWithAnimation();

      function redrawWithAnimation() {
        graph.selectAll("path")
          .data([data])
          .attr("transform", "translate(" + x(1) + ")")
          .attr("d", line)
          .transition()
          .ease(d3.easeLinear)
          .duration(transitionDelay)
          .attr("transform", "translate(" + x(0) + ")")
          .on("end", function() {
            var v = data.shift();
            data.push(v);
            redrawWithAnimation();
          })
      }
    }

    displayGraphExample("#graph1", 300, 30, 1050, 1000);
  </script>

</body>

</html>

为什么我的折线图过渡看起来很慢？

1 个答案: