javascript - DCjs 光标和工具提示

标签 javascript d3.js dc.js

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

enter image description here

现在,仅当我在某行上执行鼠标悬停时,工具提示才会显示。我需要在图表的任何点显示工具提示,并在每个轴附近显示精确值,如图表 below 所示:

enter image description here

我可以用 dc.js 来做吗?

更新:

我发现了一些d3 solution但无法用dc.js实现它。请帮助我。

最佳答案

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 中,但这很容易。

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

关于javascript - DCjs 光标和工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47326589/

相关文章:

javascript - 使用 ScrollTo 在 jQuery slimScroll 中滚动条不移动

javascript - 将颜色动态添加到多折线图,但在 d3.js 中不起作用

javascript - 如何利用 dc.js 和 d3.js 显示值堆积条形图?

javascript - D3.js - 无法读取未定义的属性 'axis'

d3.js - 使用 d3 v4.0 重新创建集群力布局

javascript - 从热图中隐藏列

javascript - 热图固定框大小(根据行和列调整热图大小)

javascript - React Router v4 不渲染组件

javascript - React-Native 中的正确导航

javascript - 将 DOM 元素附加到 Datatables 包装器