Javascript d3.js 和 chart.js 的比较（仅针对图表）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27347798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Comparison between d3.js and chart.js (only for charts)
提问by mendrugory
I have used chart.js in my projects several times but I have never used d3.js. A lot of people say that d3.js is the best javascript framework for charts but none of them is able to explain why, especially when I want a comparison to chart.js.
我在我的项目中多次使用过 chart.js，但我从未使用过 d3.js。很多人说 d3.js 是最好的图表 javascript 框架，但没有人能够解释原因，尤其是当我想与 chart.js 进行比较时。
I have found this: http://www.fusioncharts.com/javascript-charting-comparison/but it is not what I was looking for.
我找到了这个：http: //www.fusioncharts.com/javascript-charting-comparison/但这不是我想要的。
Does anyone know about a comparison of these frameworks in terms of usability and performance (only for charts)?
有谁知道这些框架在可用性和性能方面的比较（仅适用于图表）？
回答by Mark
d3.jsis not a "charting" library.It is a library for creating and manipulating SVG/HTML. It provides tools to help you visualize and manipulate your data. While you can use it to create conventional charts (bar, line, pie, etc...) it's capable of so much more. Of course with this "capable of so much" comes a steeper learning curve. There are a lot of conventional charting libraries built on top of d3.js- nvd3.js, dimple.js, dc.jsif you want to go that route.
d3.js不是“图表”库。它是一个用于创建和操作 SVG/HTML 的库。它提供了帮助您可视化和操作数据的工具。虽然您可以使用它来创建传统图表（条形图、折线图、饼图等），但它的功能远不止于此。当然，这种“能力如此之高”带来了更陡峭的学习曲线。如果你想走那条路，有很多传统的图表库建立在d3.js- nvd3.js,之上。dimple.jsdc.js
I'm not familiar with Chart.jsbut a quick look at the website tells me it's more of a run of the mill charting library. It supports 6 basic chart types and you aren't ever going to do stufflikethiswithit. Butthe API looks straightforward and I'm sure it's easy to use.
我不熟悉，Chart.js但快速浏览一下网站告诉我，它更像是一个运行的工厂图表库。它支持6种基本的图表类型，你是不是曾经打算做的东西像这样用它。 但是API 看起来很简单，而且我确信它很容易使用。
Other than that the most obvious distinction between the two is that Chart.jsis canvas based, while d3.jsis mainly about SVG. (Now I say mainlybecause d3.jscan manipulate all types of HTML elements so you could even use itto help you draw on a canvas.) In general canvas will out perform SVG for a large number of elements (I'm talking very large - thousands of points, lines, etc...). SVG, on the other hand, is easier to manipulate and interact with. With SVG each point, line, etc becomes part of the DOM - you want that point green now, just change it. With canvas its a static drawing that was to be redrawn to make any change - of course it draws so fast you'll usually never notice. Here's some good readingfrom Microsoft.
除此之外，两者之间最明显的区别Chart.js是基于画布，而d3.js主要是关于 SVG。（现在我说主要是因为它d3.js可以操作所有类型的 HTML 元素，所以你甚至可以用它来帮助你在画布上绘图。）一般来说，对于大量元素（我说的是非常大 - 数千点、线等...）。另一方面，SVG 更易于操作和交互。使用 SVG，每个点、线等都成为 DOM 的一部分 - 现在您希望该点为绿色，只需更改它即可。使用画布，它是一个静态绘图，需要重新绘制以进行任何更改 - 当然它绘制得如此之快，您通常不会注意到。这是来自 Microsoft的一些不错的读物。
回答by haferblues
Since I am trying to find a fast charting library to show charts on mobile devices, performance was important for me. It also had to have a licence that makes it possible to use commercially. I compared:
由于我试图找到一个快速的图表库来在移动设备上显示图表，因此性能对我来说很重要。它还必须有一个许可证，才能在商业上使用。我比较了：
- c3, which is based on d3 and therefore uses SVG
- chart.js which is using canvas
- c3，它基于 d3，因此使用 SVG
- 使用画布的chart.js
The charts are loaded inside a WebView component inside a native app and all data (including the JS library) is local, so no slow down due to http requests. To maximize performance even more, I additionally put everything inside one single file.
图表加载在本机应用程序内的 WebView 组件中，所有数据（包括 JS 库）都是本地的，因此不会因 http 请求而变慢。为了进一步提高性能，我还将所有内容都放在一个文件中。
I loaded 4 charts (line, bar, pie, line/bar combo) with together around 500 datapoints.
我加载了 4 个图表（线、条、饼、线/条组合）以及大约 500 个数据点。
My time measuring exluded the actual loading of the html page. I measured form the moment I started using the charting library code until the end of rendering. All chart animation was turned off.
我的时间测量排除了 html 页面的实际加载。我从开始使用图表库代码到渲染结束的那一刻进行了测量。所有图表动画都已关闭。
C3 took around 1500-1800 ms on modern Android and IPhone devices. iPhone performed around 100ms better than Android.
C3 在现代 Android 和 iPhone 设备上花费了大约 1500-1800 毫秒。iPhone 的性能比 Android 好大约 100 毫秒。
Chart.js took around 400-800ms. Android performed around 300ms better than iPhone.
Chart.js 花费了大约 400-800 毫秒。Android 的性能比 iPhone 好大约 300 毫秒。
No surprise, the SVG is slower. Depending on your use case, maybe too slow.
毫不奇怪，SVG 速度较慢。根据您的用例，可能太慢了。
On a desktop computer rendering in c3 was around 150-200ms and charts.js around 80-100ms. Running the same test in Android and iPhone emulator had the same result as on desktop. So the slow down on mobile devices is definitely due to hardware/processing limits.
在台式机上，c3 渲染大约为 150-200 毫秒，charts.js 大约为 80-100 毫秒。在 Android 和 iPhone 模拟器中运行相同的测试与在桌面上运行相同的结果。所以移动设备的速度变慢肯定是由于硬件/处理限制。
Hope that helps
希望有帮助
回答by the_red_baron
UPDATED 2016
2016 年更新
The general rule of thumb is:
一般的经验法则是：
d3.js- great for interactive visualizations
d3.js- 非常适合交互式可视化
chart.js- great for quick and simple
chart.js- 非常适合快速和简单
A few other charting librariesare on the rise, so keep testing and don't forget to contribute to the open source!
