CODEWITHSUNDEEP
javascriptd3.js
A.com
A.com

Reputation: 1645

d3 can't find linear property/method?

I am trying to do some simple d3 stuff but keep getting an error:

app.js:4 Uncaught TypeError: Cannot read property 'linear' of undefined

this code is straight out of D3.js in action: https://www.manning.com/books/d3-js-in-action

the html and js are below:

var yScale = d3.scale.linear()
               .domain([0,100,500])
               .range([0,50,100])
               .clamp(true);

d3.select("svg")
  .selectAll("rect")
  .data([14, 68, 24500, 430, 19, 1000, 5555])
  .enter()
  .append("rect")
  .attr("width", 10)
  .attr("height", function(d) {return yScale(d);})
  .style("fill", "blue")
  .style("stroke", "red")
  .style("stroke-width", "1px")
  .style("opacity", .25)
  .attr("x", function(d,i) {return i * 10;})
  .attr("y", function(d) {return 100 - yScale(d);});

html:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <svg  />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.js" type="text/JavaScript"></script>
       <script src="app.js" type="text/JavaScript"></script>
    </body>
</html>

Upvotes: 0

Views: 1576

Answers (1)

A.com
A.com

Reputation: 1645

Apparently syntax has changed since D3.js in Action was published... from:

d3.scale.linear().domain().range();

to

d3.scaleLinear().domain().range();

EDIT:

D3.js version 4.x recently came out. Most tutorials use 3.x, so you may want to use that while learning.

Upvotes: 3

Related Questions