javascript - 使用 d3.js，如何在图表上更快地显示数据？

Question

在我的代码中，我在折线图上加载了一个包含 508 个条目的 JSON。此 JSON 包含一些机器发出的数据，键是机器的名称。

这是我的 JSON 的结构:

{
    "AF3":3605.1496928113393,
    "AF4":-6000.4375230516,
    "F3":1700.3827875419374,
    "F4":4822.544985821321,
    "F7":4903.330735023786,
    "F8":824.4048714773611,
    "FC5":3259.4071092472655,
    "FC6":4248.067359141752,
    "O1":3714.5106599153364,
    "O2":697.2904723891061,
    "P7":522.7300768483767,
    "P8":4050.79490288753,
    "T7":2939.896657485737,
    "T8":9.551935316881588
}

我目前正在一个名为 cont 的计数器的帮助下读取数据，但是，我使用的代码绘制图形的时间太长了:

data.length=508

if (data.length>cont)
 cont++`

for (var name in groups) {
  var group = groups[name]
  group.data.push(aData[cont][name])
  group.path.attr('d', line)
  console.log(cont)
}

如您在上面的 gif 中所见，我的代码绘制所有数据点所用的时间太长。我想立即绘制我的数据集(在本例中为 508)的所有数据元素，例如:

data=[{508 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.

data2=[{50 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.

其中 tick 是绘制坐标的函数名称，同时又不失动画感。

怎么做到的？

这是我的代码的链接:

http://plnkr.co/edit/y8h9zs1CpLU1BZRoWZi4?p=preview

Answer 1

在我看来，您的问题是图形是同步的——“持续时间”既用于动画又用于图形移动。从本质上讲，更改持续时间将毫无用处。

您可以引入一个时间乘数。然后尝试将持续时间除以二，并使用乘数 2。您的实际数据持续时间现在是 duration*timeMultiplier(您可能想更改名称以减少混淆，或者在动画中使用 timeDivider)。

// Shift domain
x.domain([now - (limit - 2) * duration * timeMultiplier, now - duration * timeMultiplier])

// Slide x-axis left
axis.transition()
  .duration(duration)
  .ease('linear')
  .call(x.axis);

// Slide paths left
var t = paths.attr('transform', null)
  .transition()
  .duration(duration)
  .ease('linear')
t.attr('transform', 'translate(' + x(now - (limit - 1) * duration * timeMultiplier) + ')')
  .each('end', tick)

您可以尝试的另一件事是一次添加两个点，即您跳过奇数刻度的移位，并在偶数刻度上移动两倍。这减少了开销，但代价是使动画有点锯齿(但不是很多，因为它也播放得更快)。