Nicht erfasster TypeError: Die Eigenschaft 'linear' von undefined kann nicht gelesen werden

74

Ich bin neu in D3 und erhalte den folgenden Fehler in meinem Demoskript:

FirstD3.jsp: 31 Nicht erfasster Typ Fehler: Die Eigenschaft 'linear' von undefined kann nicht gelesen werden

Mein Demo-Code lautet wie folgt

<!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>

Was verursacht diesen Fehler? und wie man es löst

d3.js Augustus
quelle
12
In d3 4.x ist es d3.scaleLinear().
Gerardo Furtado

Antworten:

212

In D3 v4 wird es nicht mehr benannt d3.scale.linear(). Verwenden Sie d3.scaleLinear()stattdessen.

Babish Shrestha
quelle
4
Ich bin neu in D3.js, d3.scale.ordinal () ist in d3 v4 undefiniert? relevante Methode für die ordinale Skalierung
Mani R
2
@ Megajin detaillierte Informationen über Änderungen github.com/d3/d3/blob/master/CHANGES.md#scales-d3-scale
El Ruso
Wenn Sie eine Fehlermeldung erhalten, d3js.org/d3.v4.jsversuchen Sie esd3js.org/d3.v3.js
noobninja
1
Beachten Sie die Hauptstadt 'L' in scaleLinear ()
Edward Moffett
0

Vielen Dank für die Antwort, ich habe diesen Fehler für den folgenden Code behoben (ich studiere D3.js):

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

Mit folgendem Fehler (innerhalb der Webseite):

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

Colonna Maurizio
quelle