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

虽然D3可能是最流行的，但学习使用它并不是一件容易的事。

免费的D3.js库只是使您可以在页面上创建交互式图形的众多库之一。

这是一个免费的开源项目，基于D3.js构建 ，使任何人都可以更轻松地从头开始创建交互式数据图 。

这就是为什么Plottable.js是这么有价值的库的原因。

Plottable会为您选择的任何图表的大小和位置生成正确的代码 。

该库处理所有脏活 ，因此您可以专注于数据之类的细节。

在撰写本文时，您可以从10种绘图图样式中进行选择，包括条形图，饼图，散点图和面积图。

每个图表在Plottable中都有其自己的组件 ，您可以在其中复制/粘贴模板代码以自行重建图表。

这样，您可以轻松更改交互式元素，颜色，动画，位置，大小以及您需要的其他任何内容。

您可以单独重建组件并动态自定义其设置 。

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

这就是为什么您应该查看他们运行Plottable的示例图以了解其工作原理的原因。

但是，最好的学习方法是通过榜样。

如果要重建相似的图形，只需复制/粘贴JS代码并根据需要重新格式化。

每个图都是完全交互式的 ，并带有启动源代码。

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

最终代码被编译到ES5 JavaScript中 ，因此它应可在所有主流浏览器中使用 。

尤其是，由于它是用TypeScript编写的 ，因此您可能还希望了解一下。

如果您以前从未使用过D3.js，那么您将很难学习该库。

您将学到开始使用Plottable以及从头开始创建基于Web的动态图所需的所有知识 。

如果您愿意参加，请查看他们的教程页面 ，其中包含许多方便的资源。

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