使用d3.js，如何在图表上更快地显示数据？ [英] Using d3.js, how can I display data faster on my chart?

问题描述

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

In my code, I am loading a JSON with 508 entries on a line chart. This JSON contains data emitted by some machines, and the keys are the names of the machines.

这是我的JSON的结构：

This is the structure of my 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 的计数器，但是，我使用的代码需要很长时间来绘制图形：

I am currently reading the data with the help of a counter called cont, however, the code that I'm using takes too long to draw the graph:

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），例如：

As you can see in the gif above, my code is taking too long to plot all the data points. I would like to draw all the data elements of my data set (in this case 508) without delay, for example:

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 是函数的名称这将绘制坐标，而不会失去动画感。

Where tick is the name of the function that would draw the coordinates, without losing the sense of animation.

怎么做？

这是我的代码的链接：

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

推荐答案

在我看来，你的问题是图形是同步的 - 持续时间既用于动画，也用于图形转换。基本上，改变持续时间将无济于事。

It seems to me that your problem is the fact that the graph is synchronous - "duration" is both used for animation and for graph shifting. Essentially, changing duration will avail nothing.

您可以引入时间倍增器。然后尝试将持续时间除以2，并使用乘数2.您的实际数据持续时间现在是持续时间* timeMultiplier（您可能希望更改名称以减少混淆，或在动画中使用timeDivider）。

You can introduce a time multiplier. Then try dividing duration by two, and using a multiplier of 2. Your actual data duration is now duration*timeMultiplier (you might want to change the names to make it less confusing, or use a timeDivider in the animation).

// 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)

您可能尝试的另一件事是一次添加两个点，即你跳过奇数刻度上的移位，并在偶数刻度上移动两倍的数量。这样可以减少开销，但会使动画变得有点晃动（但不是很多，因为它也会播放得更快）。

Another thing you might try is to add the points two at a time, i.e. you skip the shift on odd ticks, and shift double the amount on even ticks. This reduces the overhead at the expense of making the animation a bit jaggier (but not very much, because it also plays faster).

这篇关于使用d3.js，如何在图表上更快地显示数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！