在 d3 中创建动态垂直规则答案

【问题标题】：Create dynamic vertical rule in d3在 d3 中创建动态垂直规则
【发布时间】：2013-04-24 17:40:50
【问题描述】：

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

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

编辑：我已尝试根据此线程 (How to make a vertical line in HTML) 中的规则创建规则，但我不知道如何根据用户的鼠标位置定位和移动它。

【问题讨论】：

在 HTML 中？在 SVG 中？你试过什么？
我更新了答案以反映这一点。

标签： javascript jquery d3.js

【解决方案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，如小提琴所示。

【讨论】：