【问题标题】:Dcjs cursor and tooltipsDcjs 光标和工具提示
【发布时间】:2017-11-16 09:58:15
【问题描述】:

我使用dc.jsd3-tip 作为我的lineChart 并得到下一个:

现在工具提示仅在我在某行上执行mouseover 时显示。我需要在图表的任何点显示工具提示,并在每个轴附近显示精确值,如图表below

我可以用 dc.js 做吗?

更新:

我找到了一些d3solution,但无法用dc.js 实现它。请帮帮我。

【问题讨论】:

    标签: javascript d3.js dc.js


    【解决方案1】:

    dc.js 并不容易为您提供执行此操作的方法。但是你可以在图表上添加一个 renderlet 或 postrender 来添加一些简单的东西。我在使用 d3-tip 和 dc.js 时遇到了问题,而是一直在使用自定义解决方案。

    在轴上放置一个带有值标签的小提琴(基于another time-related question)。 https://jsfiddle.net/2bg6eyfq/2/(已更新)

    我添加了自定义 xyTips(跟踪线),因为 dc 的 xyTips 仅适用于鼠标悬停在点上。 dc.js 中的一件棘手的事情是你不能显示数据点并设置 xyTipsOn(false),这些点就不会显示出来。

    chart
      .xyTipsOn(false)
      .renderDataPoints({radius: 3}) // these points won't show up
    

    因此,您将 xyTips 保持打开(默认),然后您可能想要删除或隐藏 dc 的 xyTips,而不是在我的小提琴中,但这很容易。

    您可能还想查看 Gordon 的这个问题和答案: how to highlight max and min points on lineChart

    【讨论】:

    • 感谢您的回答,但在您的小提琴中,自定义工具提示不直接用光标显示,而是向右几个点
    • @sf_ 哦,对了,这可能是浏览器问题。我更新了小提琴,所以 x-pos 计算使用 d3.mouse 而不是 d3.event - 这应该更可靠。
    猜你喜欢
    • 1970-01-01
    • 2014-04-28
    • 1970-01-01
    • 1970-01-01
    • 2012-04-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-09
    相关资源
    最近更新 更多