【问题标题】:How to remove cursor pointer from d3 Pie chart如何从 d3 饼图中删除光标指针
【发布时间】:2015-05-05 12:44:28
【问题描述】:

是否有一个选项可以禁用 c3|d3 饼图中的“光标:指针”样式? 我只是显示切片,悬停时只显示百分比和标签,不需要指针,因为它被误解为指向某个地方的链接,但它是默认光标...

更新 1: 我找到了解决方法,但它没有回答我的问题..

onrendered: function () { $('#my_chart_id .c3-shape').css('cursor', 'default'); }

【问题讨论】:

    标签: d3.js pie-chart c3


    【解决方案1】:

    我认为最直接的做法是使用 D3 选择饼图的每个弧并更改光标样式,如下所示:

    d3.selectAll(".c3-arc").style("cursor", "auto");
    

    在这里提琴:http://jsfiddle.net/henbox/k9Dbf/270/

    此处的光标样式选项:http://www.w3schools.com/cssref/pr_class_cursor.asp

    【讨论】:

    • 非常感谢亨利,我会支持它,尽管它实际上不是 d3 选项。在我的更新中,您可能会看到类似的方法,我认为这种方法更好,因为即使图表以某种方式重新渲染,它也会运行。
    • @cnom:光标的外观是使用 css 规则设置的。默认情况下,它由库设置为pointer,它显示了您不喜欢的结果。由于 C3/D3 中没有内置函数来显式设置光标,因此这个答案几乎是使用纯 D3 可以获得的最佳答案。如果您担心重新渲染,不妨将此 css 规则从您的代码移至外部样式表。我更新了JSFiddle 来展示这种替代方法。
    • @autocumulus 使用!important 确保设置覆盖默认的 c3 css。我忘了你能做到这一点
    • @altocumulus 这是一个不错的方法,但问题是这可能会破坏站点中的其他饼图(需要指针的地方)。当然,您可以说我通过定义我想要的每个图形的 id 来使 css 选择器更加具体,但是我想这将是糟糕的编程..
    • @cnom 您拥有 CSS 选择器的所有灵活性。您可以通过使用更具体的选择器(如#mychartid .c3-arc)或通过为您希望表现不同的图表提供标记类来轻松指定哪些图表将受到影响。
    【解决方案2】:

    通过 CSS 覆盖:

    .c3-shape {
      cursor: default !important;
    }
    

    【讨论】:

      【解决方案3】:

      我使用了针对所有(我们的)c3 实例的 css 覆盖:

      .c3-event-rect {
        cursor: default !important;
      }
      

      【讨论】:

        猜你喜欢
        • 2015-08-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-12-29
        相关资源
        最近更新 更多