Stephen Adelakun Stephen Adelakun - 11 months ago 68
Javascript Question

d3 microlibraries not working

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
. 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 Source

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: