d3 microlibraries not working

Question

I am just learning d3 but I can't understand why other microlibraries within d3 are not working after correctly loading d3. For example, if I do something like

var xScale = d3.scale.linear().domain([0, 20]).range([0, width]);

var yScale = d3.scale.linear().domain([0, 20]).range([height, 0]);

My browser console says

Uncaught TypeError: Cannot read property 'linear' of undefined

, whereas I see this used in many examples. Similarly, something like

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

var yAxis = d3.svg.axis().scale(yScale).orient("left");

would generate error about

svg

. I understand that once I do

<script src="d3-folder/d3.js"></script>

all the other smaller libraries should be available. Why is it not so on my system?

Answer 1

Sounds like a version problem of your included d3 file. Are you using D3 V3.x or V4.x?
In V3.x you are using a linaer scale like you posted:

d3.scale.linear().domain([0, 20]).range([0, width]);.

But in V4.x they changed the namespace to:

d3.scaleLinear().domain([0, 20]).range([0, width]);

Axis are also separated in their different areas:

d3.axisTop - create a new top-oriented axis generator
d3.axisRight - create a new right-oriented axis generator
d3.axisBottom - create a new bottom-oriented axis generator
d3.axisLeft - create a new left-oriented axis generator

Here you can find the actual API reference for D3 V4.x: https://github.com/d3/d3/blob/master/API.md

d3 microlibraries not working

Sign up