在d3中创建动态垂直规则

我想创建一个垂直规则，如http://bost.ocks.org/mike/cubism/intro/demo-stocks.html中显示的那个，根据用户的鼠标动态更新其值。

这个演示使用cubism.js，但我想使用d3和/或jQuery来实现相同的效果。 有什么建议？

编辑：我已经尝试根据此线程中的规则创建规则（ 如何在HTML中制作垂直线 ），但我不知道如何定位它并根据用户的鼠标位置移动它。

Answer 1

您需要更新您的问题以包含有关您实际需要的更多详细信息，但这是使用d3的一个实现： http ： //jsfiddle.net/q3P4v/

d3.select('html').on('mousemove', function() { var xpos = d3.event.pageX; var rule = d3.select('body').selectAll('div.rule') .data([0]); rule.enter().append('div') .attr('class', 'rule') .append('span'); rule.style('left', xpos + 'px'); rule.select('span').text(xpos); }); 

请注意，这取决于一些相关的CSS，如小提琴中所示。