Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
788 views
in Technique[技术] by (71.8m points)

math - How to calculate the scale's result?

I am new to d3.js library, and I am trying to understand the concept of domain and ranges.

I read Scott Murray's book, but I don't know how to calculate it.

I have this:

var scale = d3.scale.linear()
    .domain([100, 500])
    .range([10, 350]);

scale(100);  //Returns 10
scale(300);  //Returns 180
scale(500);  //Returns 350

I know that 100 units of my input represent 10 in my output, and the same with 500 and 350... but why 180 is returned for 300 as input? How can I calculate this value?

I read this tutorial too, which explains how to calculate it, but when I follow the method, I don't get the same value, i.e., scale(300) doesn't return 180.

Any idea why?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

THE EQUATION OF THE LINE

To get the equation used in a D3 linear scale you only need to understand that such scale uses a linear interpolation. In simple words, all you need is the equation of the line created by the two points you're passing to D3 scale generator.

In your example...

.domain([100, 500])
.range([10, 350]);

...will give us two points, using the Cartesian coordinates system (x, y):

  • The first point is 100,10 (x = 100 and y = 10)
  • The second point is 500,350 (x = 500 and y = 350)

Keep in mind that in my explanation the x axis represents what in math is called the domain (in D3 lingo, also domain), that is, the set of input values, while the y axis represents what in math is called the image (in D3 lingo, the range), that is, the set of output values.

So, using those two points, this is the line you get:

enter image description here

Now let's explain visually what a linear scale like this one does:

Choose any point in the x axis (it can even be outside the domain). This is your input value (in the domain). Go up (or down) until you cross the red line. The y coordinate of the point where you cross the red line corresponds to your output value (in the image, or range).

Now, back to the equation:

Having our 2 points, we can now calculate the equation of the line.

The general equation of the line is:

enter image description here

Where y (also known as f(x) in most math books) is the range, and x is the domain.

The first step is finding m, which we can do using our 4 points:

enter image description here

Remember that:

  • x1 is the first value in the domain array (=100)
  • x2 is the last value in the domain array (=500)
  • y1 is the first value in the range array (=10)
  • y2 is the last value in the range array (=350)

Putting all these four values in the equation, it gives us that m is 17/20.

Now, solving the equation for b (using any of the two points)...

enter image description here

... we have that b is -75, which gives us our final equation:

enter image description here

And that's it. Using this equation, you can get any point in the image (range), relative to any domain input.

Example:

Let's calculate the output (range) for 125 (as in your comment). Very easy:

enter image description here

And that gives us... 31.25!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...