在d3中创建动态垂直规则

Create dynamic vertical rule in d3

本文关键字：垂直 规则 动态 创建 d3      更新时间：2023-09-26

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

这个演示使用了cubism.js，但我想使用d3和/或jQuery来达到同样的效果。有什么建议吗?

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

你需要更新你的问题，包括更多关于你实际想要的细节，但这里有一个使用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，如图所示。

相关文章：