在d3中创建动态垂直规则 [英] Create dynamic vertical rule in d3

问题描述

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

I want to create a vertical rule like the one shown at http://bost.ocks.org/mike/cubism/intro/demo-stocks.html that updates its value dynamically according to the user's mouse.

此demo使用cubism.js，但我想使用d3和/或jQuery来实现相同的效果。
任何建议？

This demo uses cubism.js but I'd like to use d3 and/or jQuery to achieve the same effect. Any suggestions?

编辑：我已经尝试根据这个线程创建规则（如何做一条垂直线），但我不知道如何定位它，并根据用户的鼠标位置移动它。

I've tried creating rules according to the ones in this thread (How to make a vertical line), but I don't know how to position it and move it according to the user's mouse position.

推荐答案

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

You need to update your question to include more detail about what you actually want, but here's one implementation using 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，如小提琴所示。

Note that this depends on some associated CSS, as shown in the fiddle.

这篇关于在d3中创建动态垂直规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！