Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Time displayed in axis description while mouse over #15

Open
santilland opened this issue Nov 13, 2013 · 0 comments
Open

Time displayed in axis description while mouse over #15

santilland opened this issue Nov 13, 2013 · 0 comments
Labels

Comments

@santilland
Copy link
Member

I had a look at how cubism.js displays what the time is where the mouse is, which looks pretty good to me. It can be seen here:
http://square.github.io/cubism/

It seems he has written a thin wrapper for the d3 axis object which i think we could reuse. It can be found here:
https://github.com/square/cubism/blob/master/src/axis.js

The code i think is of interest is the one that follows:

context.on("change.axis-" + id, function() {
      g.call(axis_);
      if (!tick) tick = d3.select(g.node().appendChild(g.selectAll("text").node().cloneNode(true)))
          .style("display", "none")
          .text(null);
    });

    context.on("focus.axis-" + id, function(i) {
      if (tick) {
        if (i == null) {
          tick.style("display", "none");
          g.selectAll("text").style("fill-opacity", null);
        } else {
          tick.style("display", null).attr("x", i).text(format(scale.invert(i)));
          var dx = tick.node().getComputedTextLength() + 6;
          g.selectAll("text").style("fill-opacity", function(d) { return Math.abs(scale(d) - i) < dx ? 0 : 1; });
        }
      }
    });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant