d3.js - 有没有办法改变鼠标悬停时的c3js堆积面积图不透明度

Question

我有一个关于 c3.js 的问题。目前，我们正在使用 c3js 显示堆叠区域图，这很好，但是我们的客户问我们是否可以在客户将鼠标悬停在一个区域时更改单个区域的不透明度。我找不到任何解决方案，希望听到您的建议。谢谢

标签： d3.jsc3.js

Answer 1

设置图表后尝试添加它-->

d3.selectAll(".c3-area")
    .style ("pointer-events", "all")
    .on("mouseover", function (d) { return d3.select(this).style("opacity", 0.6)})
    .on("mouseout", function (d) { return d3.select(this).style("opacity", 0.2)})
;

指针事件设置是重要的一点，因为默认情况下 c3 图表中的大多数元素都被设置为忽略它们。

将其添加到 c3 示例的末尾以查看它是否正常工作 --> https://c3js.org/samples/chart_area.html