Uncaught TypeError: Cannot read property 'linear' of undefined

I'm new to D3 and getting the following error in my demo script -

FirstD3.jsp:31 Uncaught TypeError: Cannot read property 'linear' of undefined

My demo code is as follow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Linear Scales</title>
<style type="text/css">

</style>
</head>
<body>
<script type="text/javascript">
var dataset = [
           [ 5,     20 ],
           [ 460,   90 ],
           [ 250,   50 ],
           [ 100,   33 ],
           [ 330,   95 ],
           [ 410,   12 ],
           [ 468,   44 ],
           [ 25,    67 ],
           [ 85,    21 ],
           [ 220,   88 ]
       ];
var w = 500;
var h = 100;


var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) { return d[0]; })])
        .range([0, w]);

var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) { return d[1]; })])
        .range([0, h]);

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", function (d) {
             return Math.sqrt(h-(d[1]));
         });

      svg.selectAll("text")
         .data(dataset)
         .enter()
         .append("text")
         .text(function (d) {
             return d[0]+","+d[1];
         })
         .attr("x", function (d) {
             return xScale(d[0]);
         })
         .attr("y", function (d) {
             return yScale(d[1]);
         })
         .attr("font-size", "11px")
         .attr("fill", "red");



</script>
</body>
</html>

what is causing this error? and how to solve it

Babish Shrestha

In D3 v4 it is no longer named d3.scale.linear(). Use d3.scaleLinear() instead.

Colonna Maurizio

Thanks for the answer, I've solved this error for the following code (I'm studing D3.js) :

var colorScale = d3.scale.linear().domain([0, 100]).range(["#add8e6", "blue"]);

With the following error (inside the web page) :

Uncaught TypeError: Cannot read property 'linear' of undefined at index.html:22

来源：https://stackoverflow.com/questions/38450349/uncaught-typeerror-cannot-read-property-linear-of-undefined

标签

d3.js

d3v4