时间戳

首页 > 解决方案 > 带线数据的日期和时间转换

javascript - 带线数据的日期和时间转换

问题描述

我使用 D3 V5 创建了这个图表。此外，我已将示例数据附在小提琴上，您可以通过单击此处查看。

我已经包含了tick功能代码块，它在向左滑动的路径上附加了 x 和 y 比例和行/数据的新域：

当 tick 函数执行时，线会重建，使其看起来像弹跳一样。
重建线路时，它如何平滑，完全没有反弹？

var tr = d3
  .transition()
  .duration(obj.tick.duration)
  .ease(d3.easeLinear);

function tick() {
  return setInterval(function() {
    var newData = [];
    var tickFunction = obj.tick.fnTickData;
    if (tickFunction !== undefined && typeof tickFunction === "function") {
      newData = tickFunction();
      for (var i = 0; i < newData.length; i++) {
        obj.data.push(newData[i]);
      }
    }

    if (newData.length > 0) {
      var newMaxDate, newMinDate, newDomainX;
      if (isKeyXDate) {
        newMaxDate = new Date(
          Math.max.apply(
            null,
            obj.data.map(function(e) {
              return new Date(e[obj.dataKeys.keyX]);
            })
          )
        );
        newMinDate = new Date(
          Math.min.apply(
            null,
            obj.data.map(function(e) {
              return new Date(e[obj.dataKeys.keyX]);
            })
          )
        );
        newDomainX = [newMinDate, newMaxDate];
      } else {
        newDomainX = [
          d3.min(obj.data, function(d) {
            return d[obj.dataKeys.keyX];
          }),
          d3.max(obj.data, function(d) {
            return d[obj.dataKeys.keyX];
          })
        ];
      }

      // update the domains
      //x.domain([newMinDate, newMaxDate]);
      if (obj.tick.updateXDomain) {
        newDomainX = obj.tick.updateXDomain;
      }
      x.domain(newDomainX);
      if (obj.tick.updateYDomain) {
        y.domain(obj.tick.updateYDomain);
      }

      path.attr("transform", null);

      // slide the line left
      if (obj.area.allowArea) {
        areaPath.attr("transform", null);
        areaPath
          .transition()
          .transition(tr)
          .attr("d", area);
      }
      path
        .transition()
        .transition(tr)
        .attr("d", line);
      svg
        .selectAll(".x")
        .transition()
        .transition(tr)
        .call(x.axis);
      svg
        .selectAll(".y")
        .transition()
        .transition(tr)
        .call(y.axis);

      // pop the old data point off the front
      obj.data.shift();
    }
  }, obj.tick.tickDelay);
}
this.interval = tick();

标签： javascriptcssd3.jschartstransition

解决方案

该反弹实际上是您转换d属性时的预期结果，它只是一个字符串。

这里有几种解决方案。在不过多重构代码的情况下，一个简单的方法是使用pathTweenMike Bostock 在此 bl.ocks 中编写的函数：https ://bl.ocks.org/mbostock/3916621 。在这里，我对其进行了一些更改，以便您可以传递数据，如下所示：

path.transition()
    .transition(tr)
    .attrTween("d", function(d) {
        var self = this;
        var thisd = line(d);
        return pathTween(thisd, 1, self)()
    })

这是分叉的 plunker：https ://plnkr.co/edit/aAqpdSb9JozwHsErpqa9?p=preview

推荐阅读