D3.js的最大数据文件大小 [英] Maximum Data File Size for D3.js

问题描述

D3js的数据文件大小的限制因素是什么？它只是需要多长时间从服务器加载到客户端？

What is the limiting factor with data file size for D3js? Is it just how long it takes for the file to load from the server to the client?

我正在尝试创建芝加哥的路线图，您可以将鼠标悬停在路上，获取它的名称并将其突出显示。文件大小是从城市125 MB。我通过删除不必要的信息，将其减少到30 MB，然后将其转换为TopoJSON文件，使其降至5.1MB。这是一个不规范的文件大小？

I'm trying to create a road map of Chicago, where you can hover over the road to get it's name and highlight it. The file size was 125 MB from the city. I stripped it down to 30 MB by removing unnecessary information, and then converted it to a TopoJSON file bringing it down to 5.1MB. Is this an unruly file size?

推荐答案

使用大量数据时有三个限制因素：

There are three limiting factors when working with large amounts of data:

• 要加载的文件大小和服务器/客户端的连接速度。


• 对数据进行处理。


• 呈现表示数据的视觉元素。

如果没有关于应用程序的更多细节，猜测它是哪一个，但在我的经验，它几乎总是第三。

Without more details on your application, it's hard to guess which one it is, but in my experience it is almost always the third. The rendering of the elements usually takes most of the time it takes to display a visualisation.

浏览器中的调试/ Web开发工具应该能让您更好地了解瓶颈是;特别是你应该能够很容易地发现加载JSON需要多长时间。如果这显然比显示可视化的时间短，问题几乎肯定是元素的渲染。

The debug/web development tools in your browser should give you a better idea of where the bottleneck is; in particular you should be able to find out quite easily how long it takes to load the JSON. If that is significantly shorter than the time to display the visualisation, the problem is almost certainly the rendering of the elements.

在这种情况下，有两个主要的事情做。您可以减少显示的元素数量（例如通过聚合），或切换到不同的呈现机制。特别是，canvas渲染速度明显快于SVG。如果你做这个转换，你失去了SVG的交互性很容易，所以它是一个权衡取决于你的特定应用程序。

In this case, there are two main things you can do. You can either reduce the number of elements shown (e.g. by aggregating), or switch to a different rendering mechanism. In particular, canvas renders significantly faster than SVG. If you make that switch, you lose the interactivity that SVG makes quite easy, so it's a tradeoff that depends on your particular application.

这篇关于D3.js的最大数据文件大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！