CODEWITHSUNDEEP
d3.js
MageeWorld
MageeWorld

Reputation: 402

D3 Beginner - having some issues with scale

I recently started working on D3 and found what feels like a good introductory tutorial by Mr Scott Murray at alignedleft.com. I'm currently trying to replicate his information on scale, but I'm running into a problem that I can't seem to solve. I've gone so far as to copy and paste his code and it isn't working.

I'm probably using a newer version of D3 than the tutorial is written on and I'm just missing something that changed in a version?

I'm currently using d3 version 4.3.0

The code I'm working with is

var dataset = [
          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
        ];

var w = 500;
var h = 200;

var yScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[1]; })])
               .range([0, h]);
var xScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[0]; })])
               .range([0, w]);
var svg = d3.select("body").append("svg").attr("height", h).attr("width", w);

svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx", function(d) {
  return xScale(d[0]);
}).attr("cy", function(d){
  return yScale(d[1]);
}).attr("r", 5);

Any guidance or reason for this not working would be appreciated

Upvotes: 1

Views: 810

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

D3.js version four will break a fair amount of code from version three. The reason being the "great namespace flattening" of version 4.

The following methods relating to scales have changed:

d3.scale.linear ↦ d3.scaleLinear
d3.scale.sqrt ↦ d3.scaleSqrt
d3.scale.pow ↦ d3.scalePow
d3.scale.log ↦ d3.scaleLog
d3.scale.quantize ↦ d3.scaleQuantize
d3.scale.threshold ↦ d3.scaleThreshold
d3.scale.quantile ↦ d3.scaleQuantile
d3.scale.identity ↦ d3.scaleIdentity
d3.scale.ordinal ↦ d3.scaleOrdinal
d3.time.scale ↦ d3.scaleTime
d3.time.scale.utc ↦ d3.scaleUtc

So, your d3.scale.linear() should read d3.scaleLinear()

Upvotes: 2

Related Questions