javascript - Dcjs 光标和工具提示

Question

我将 dc.js 和 d3-tip 用于我的折线图并得到下一个:

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

我可以用 dc.js 做吗？

更新:

我找到了一些 d3 solution但不能用 dc.js 实现。请帮助我。

Answer 1

dc.js 不会轻易地为您提供执行此操作的方法。但是您可以在图表上添加 renderlet 或 postrender 来添加一些简单的东西。我在将 d3-tip 与 dc.js 结合使用时遇到问题，而是一直在使用自定义解决方案。

将 fiddle 放在一起(基于 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，这不是我的 fiddle ，但这很容易。

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