Menu
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
349
In D3 v4 it is no longer named d3.scale.linear(). Use d3.scaleLinear() instead.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
