Dcjs 光标和工具提示
Dcjs cursor and tooltips
我使用 dc.js
和 d3-tip
作为折线图并得到下一个:
现在只有当我在某行上执行 mouseover
时才会显示工具提示。我需要在图表的任何点显示工具提示,并在图表 below:
中显示每个轴附近的精确值
我可以用 dc.js 做吗?
更新:
我找到了一些 d3
solution 但无法用 dc.js
实现。请帮助我。
dc.js 不会轻易地给你一个方法来做到这一点。但是您可以在图表上添加 renderlet 或 postrender 来添加一些简单的东西。我在 dc.js 中使用 d3-tip 时遇到问题,而是一直在使用自定义解决方案。
将 fiddle 放在一起(基于 ),并在轴上使用值标签。
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 的这个问答:
我使用 dc.js
和 d3-tip
作为折线图并得到下一个:
现在只有当我在某行上执行 mouseover
时才会显示工具提示。我需要在图表的任何点显示工具提示,并在图表 below:
我可以用 dc.js 做吗?
更新:
我找到了一些 d3
solution 但无法用 dc.js
实现。请帮助我。
dc.js 不会轻易地给你一个方法来做到这一点。但是您可以在图表上添加 renderlet 或 postrender 来添加一些简单的东西。我在 dc.js 中使用 d3-tip 时遇到问题,而是一直在使用自定义解决方案。
将 fiddle 放在一起(基于
我添加了自定义 xyTips(跟踪线),因为 dc 的 xyTips 仅适用于鼠标悬停在点上。 dc.js 中的一件棘手的事情是您无法显示数据点并设置 xyTipsOn(false),这些点将不会显示。
chart
.xyTipsOn(false)
.renderDataPoints({radius: 3}) // these points won't show up
因此,您将 xyTips 保持打开状态(默认),然后您可能想要删除或隐藏 dc 的 xyTips,而不是在我的 fiddle 中,但这很容易。
您可能还想看看 Gordon 的这个问答: