What's the simplest way to code four rulers that move together with mouse in a d3 data visualization?

Question

I am working on a visualization project using D3. I want to implement four rules like this. I want the rules to aid reading values like in the demo. As I have four columns of time series in my current visualization project, I wish to have four of these rules and when my mouse moves, I wish the four rules can move together. What would be the simplest way to code this?

By looking at the source code of the demo I tried this with my code:

  var context = cubism.context();
  d3.select("body").append("div")
    .attr("class", "rule")
    .call(context.rule());

I can see this element in my html:

<div class="rule" style="display: inline;">
  <div class="line" style="position: absolute; top: 0px; bottom: 0px; width: 1px; pointer-events: none; display: none;"></div>
</div>

However I see no rule showing up.

Moreover, according to its documentation, Cubism context deals with realtime data. I'm not visualizing realtime data in my project so I feel Cubism is an overkill here. Is there a simpler way to code four rules of similar style that move together?

If I understand correctly, you would need to get the x value at the mouse position and then the y values for that x. Then add text elements (and a line) that show them. [This crosshairs example](http://tributary.io/inlet/8677777) should help you to get started. — Lars Kotthoff, Feb 08 '14 at 13:51

score 0 · Answer 1 · answered Mar 04 '14 at 19:53

For example, if you wanted to reposition the horizon charts' value labels on focus, you might say:

context.on("focus", function(i) {
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

https://github.com/square/cubism/wiki/Context#wiki-horizon

What's the simplest way to code four rulers that move together with mouse in a d3 data visualization?

1 Answers1