【发布时间】:2015-05-05 12:44:28
【问题描述】:
是否有一个选项可以禁用 c3|d3 饼图中的“光标:指针”样式? 我只是显示切片,悬停时只显示百分比和标签,不需要指针,因为它被误解为指向某个地方的链接,但它是默认光标...
更新 1: 我找到了解决方法,但它没有回答我的问题..
onrendered: function () { $('#my_chart_id .c3-shape').css('cursor', 'default'); }
【问题讨论】:
是否有一个选项可以禁用 c3|d3 饼图中的“光标:指针”样式? 我只是显示切片,悬停时只显示百分比和标签,不需要指针,因为它被误解为指向某个地方的链接,但它是默认光标...
更新 1: 我找到了解决方法,但它没有回答我的问题..
onrendered: function () { $('#my_chart_id .c3-shape').css('cursor', 'default'); }
【问题讨论】:
我认为最直接的做法是使用 D3 选择饼图的每个弧并更改光标样式,如下所示:
d3.selectAll(".c3-arc").style("cursor", "auto");
在这里提琴:http://jsfiddle.net/henbox/k9Dbf/270/
此处的光标样式选项:http://www.w3schools.com/cssref/pr_class_cursor.asp
【讨论】:
pointer,它显示了您不喜欢的结果。由于 C3/D3 中没有内置函数来显式设置光标,因此这个答案几乎是使用纯 D3 可以获得的最佳答案。如果您担心重新渲染,不妨将此 css 规则从您的代码移至外部样式表。我更新了JSFiddle 来展示这种替代方法。
!important 确保设置覆盖默认的 c3 css。我忘了你能做到这一点
#mychartid .c3-arc)或通过为您希望表现不同的图表提供标记类来轻松指定哪些图表将受到影响。
通过 CSS 覆盖:
.c3-shape {
cursor: default !important;
}
【讨论】:
我使用了针对所有(我们的)c3 实例的 css 覆盖:
.c3-event-rect {
cursor: default !important;
}
【讨论】: