Create dynamic vertical rule in d3

Question

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.

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

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

In HTML? In SVG? What have you tried? – nrabinowitz Apr 24 '13 at 22:59 — nrabinowitz, Apr 24 '13 at 22:59
I updated the answer to reflect this. – Apr 25 '13 at 02:04 — , Apr 25 '13 at 02:04

score 3 · Accepted Answer · answered Apr 24 '13 at 23:12

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);
});

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

Create dynamic vertical rule in d3

1 Answers1

Linked