使用Plottable.js在D3上快速构建动态图

免费的D3.js库只是使您可以在页面上创建交互式图形的众多库之一。 虽然D3可能是最流行的，但是学习使用它并不是一件容易的事。

这就是为什么Plottable.js是一个如此有价值的库的原因。 这是一个基于D3.js的免费开源项目，使任何人都可以从头开始轻松创建交互式数据图 。

该库处理所有脏活 ，因此您可以专注于数据之类的细节。 Plottable会为您选择的任何图表的大小和位置生成正确的代码 。

每个图表在Plottable中都有其自己的组件 ，您可以在其中复制/粘贴模板代码以自行重建图表。 在撰写本文时，您可以从10种绘图图样式中进行选择，包括条形图，饼图，散点图和面积图。

您可以单独重建组件并动态自定义其设置 。 这样，您可以轻松更改交互式元素，颜色，动画，位置，大小以及您需要的其他任何内容。

如果您想浏览源代码并下载副本，可以在GitHub上找到 完整的库 。

但是，最好的学习方法是通过榜样。 这就是为什么您应该查看他们的运行Plottable的示例图以了解其工作原理的原因。

每个图都是完全交互的 ，需要启动源代码。 如果要重建相似的图形，只需复制/粘贴JS代码并根据需要重新格式化。

我在他们的网站上有两个个人收藏夹：按照GitHub活动面板建模的Calendar Heatmap和具有动态选择功能的Synchronized Charts 。

如果您以前从未使用过D3.js，那么您将很难学习该库。 尤其是，由于它是用TypeScript编写的 ，因此您可能还希望了解它。 最终代码被编译到ES5 JavaScript中 ，因此它应可在所有主流浏览器中使用 。

如果您愿意参加，请查看他们的教程页面 ，其中包含许多实用资源。 您将学到开始使用Plottable以及从头开始创建基于Web的动态图所需的所有知识 。

翻译自: https://www.hongkiat.com/blog/build-dynamic-graph-plottable-js/