Skip to content

Time displayed in axis description while mouse over #15

@santilland

Description

@santilland

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions