c3js：自定义区域工具提示、悬停效果等

Question

我一直在用 c3js 创建一个指标模块（使用时间序列）。我现在正试图在我的指标数据上绘制事件，这些数据是日期跨度（startDate 到 endDate）。使用 c3js 的区域似乎是一个不错的选择，只需要稍微修改一下就可以使它们变短并出现在我所有的图形数据之上。

问题是，名为g.c3-regions 的实际 SVG 组会自动显示在图形数据的后面。有道理，没有任何实际需要允许任何用户与区域进行交互。我需要它在最前面，所以我可以将hover 和click 函数绑定到每个事件。

我尝试使用 jQuery：$('.c3-regions').insertAfter('.c3-chart')，它只是将它放在前面。工作正常 - 也就是说，直到我的 c3js 实例重新渲染。然后它吐出一个错误，它无法重新渲染区域（因为它们显然移动了）

我也尝试克隆它并将其放在前面，但它似乎没有复制 SVG 信息。

任何帮助将不胜感激，可以根据要求提供任何代码示例。

干杯 - - 安德鲁

Answer 1

为了扩展 Robert Longson 的评论，您要添加的是

.c3-event-rect {
    pointer-events: none;
}

.c3-chart {
    pointer-events: none;
}

这将允许点击进入区域层。