CODEWITHSUNDEEP
javascriptd3.js
Sergei Basharov
Sergei Basharov

Reputation: 53850

Convert given range values to domain values in D3

I have a linear scale:

var xRange.range([0, parentWidth]).domain([0, 100]);

Now on mouseover I get xy coords of the mouse cursor using d3.mouse(container). Then I show a floating tooltip. I need to put xy values calculated from mouse position according to the xRange scale.

How do I do it? Or do I have to create another scale with swapped range and domain values?

Upvotes: 2

Views: 4668

Answers (1)

Oleg
Oleg

Reputation: 9359

No need for another scale. For linear (numeric) input you can use linear.invert(), which:

Returns the value in the input domain x for the corresponding value in the output range y. This represents the inverse mapping from range to domain.

Example:

var x = d3.scale.linear()
        .domain([0,50])
        .range([0,100]);

// domain to range:
x(25); // 50

// range to domain:
x.invert(50); // 25

Upvotes: 16

Related Questions