javascript - C3触发动画并为路径分配id

Question

我正在使用 c3.js，它是一个“基于 D3 的可重用图表库”。我还为带有饼图的圆环图创建了自己的图例。我想链接图例和图表，这样如果我单击图例项，它将在图例div和甜甜圈/饼图上的相应path元素上触发动画，反之亦然（单击饼图/甜甜圈路径将触发两者都有动画）。我知道您可以为 c3 项目设置 onclick 事件侦听器，但没有任何 id 我无法识别相应的 legend div。另外，如果我在图例divs 上设置了一个点击处理程序，我将不知道对应的path，我也不知道如何触发 c3 的内置点击动画。

编辑：我发现您可以触发选定状态（http://c3js.org/reference.html#api-select），但您必须向它传递一个 id。在我的图表上，没有要传入的 ID。有没有办法为每个数据点设置自定义 ID？

Answer 1

为了使用selectAPI 调用，您无需分配自己的 id。您可以做的是传入图表表示的数据集，然后选择数据集中数据点的索引。

例如，您的圆环图正在绘制一个名为 salesBreakdown 的数据集，该数据集有 10 个元素。当有人点击div图例上的第一个时，您可以调用：

chart.select(['salesBreakdown'], [0], true);  

这将设置selected对应于 salesBreakdown[0] 的弧上的状态。重置所有其他弧的true状态，如果你想做多选或类似的事情，你可以留下这个假。