css - 立体主义 - 选定时间和行的值

Question

我爱Cubism.js

但我想实现演示中缺少的功能。

这就是需要查看选定时间和行的值。当我将鼠标悬停在图表上时 - 我想显示鼠标光标所在行的值（参见垂直线旁边的图片）

怎么可能做到这一点？

我有机会使用 CSS 还是需要深入研究 d3.js？

编辑：我找到了Stock-Demo ......但现在仍然知道这是如何完成的 :(

Answer 1

查看视图源：http ://bost.ocks.org/mike/cubism/intro/demo-stocks.html 。您需要的是以下内容： d3.select("body").append("div") .attr("class", "rule") .call(context.rule());

这使用 context.rule() 来实现，一个 d3/cubism 函数。

上一个答案为您提供了一行的值，即鼠标所在的行。cubism.js 规则将给出所有行的值。

Answer 2

我可以通过使用 CSS 轻松实现这一点。首先，隐藏所有值：

.horizon .value {display: none;}

然后在悬停时显示值：

.horizon:hover .value {display: inherit;}