json - D3.js 的最大数据文件大小

Question

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

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

Answer 1

处理大量数据时存在三个限制因素:

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

要对数据进行的处理。

呈现数据的视觉元素。

如果没有关于您的应用程序的更多详细信息，很难猜测它是哪一个，但根据我的经验，它几乎总是第三个。元素的渲染通常花费大部分时间来显示可视化。

浏览器中的调试/网络开发工具应该能让你更好地了解瓶颈在哪里；特别是您应该能够很容易地找出加载 JSON 需要多长时间。如果这明显短于显示可视化的时间，则问题几乎肯定是元素的渲染。

在这种情况下，您可以做两件事。您可以减少显示的元素数量(例如通过聚合)，或者切换到不同的渲染机制。特别是，canvas 的渲染速度明显快于 SVG。如果您进行这种切换，您将失去 SVG 非常容易实现的交互性，因此这是一个取决于您的特定应用程序的权衡。