d3.scale.linear() vs d3.scaleLinear()

user_1893672 0
Viewed 56509

Hi I'm looking at the documentation for scales and it shows a format like this var x = d3.scaleLinear([10,130]).range([0,960]) I feel like this is strange because most examples that I see online use something like this:

var x = d3.scale.linear().domain([10,130]).range([0,960]) and it works.

If I use var x = d3.scaleLinear([10,130]).range([0,960]); I get an error like

TypeError: d3.scaleLinear is not a function

Why do you think there is a discrepancy between the examples in the documentation and what I see in examples online? maybe I don't understand how to read documentation.

EDIT : This is the current documentation for scales.

d3.js svg javascript
4 Answers

They are doing exactly the same thing, but it's just code change happen to D3.js from version 3 to version 4...

So linear is not property of scale object of d3 framework anymore...

instead it's part of d3 with camelCase syntax...

So d3.js v3 use d3.scale.linear()

and to create a linear scale with v4 use d3.scaleLinear() instead...

version 3:

d3.scale.linear()

Constructs a new linear scale with the default domain [0,1] and the default range [0,1]. Thus, the default linear scale is equivalent to the identity function for numbers; for example linear(0.5) returns 0.5.

version 4:

d3.scaleLinear()

Constructs a new continuous scale with the unit domain [0, 1], the unit range [0, 1], the default interpolator and clamping disabled. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.

user_54231080

As specified by Hina, d3.scale.linear() is used on D3 3.0, and d3 4.0 adopted the flat namespace convention. Here is a snippet from the d3 changelog summary

If you don’t care about modularity, you can mostly ignore this change and keep using the default bundle. However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear,...

Source: https://github.com/d3/d3/blob/master/CHANGES.md

EDIT: Forgot to mention - to fix your error, you may have to update the link or file to d3 that you have in your program. I call it directly from the website with:

<script src="https://d3js.org/d3.v4.min.js"></script>
user_65816020
Related