D3.js In Action, Codebeispiel funktioniert nicht

Question

Ich kopierte ein Beispiel aus dem Buch D3.js In Aktion für ein einfaches Balkendiagramm und bekomme einen Fehler, wenn ich versuche, es auszuführen.

Console Fehler:

charts.js:3 Uncaught TypeError: Cannot read property 'linear' of undefined 

Der Code:

var yScale = d3.scale.linear().domain([0, 390]).range([0,100]); 

d3.select('svg') 
    .selectAll('rect') 
    .data([150,390,340,295]) 
    .enter() 
    .append('rect') 
    .attr('width', 50) 
    .attr('height', function(d) { return yScale(d); }) 
    .attr('x', function(d, i) { return i*60; }) 
    .attr('y', function(d) { return 100 - yScale(d); }) 
    .style('fill', 'rgb(104, 167, 207)'); 

Wenn ich die yScale Erklärung nach unten bewege ich die folgende Fehlermeldung erhalten:

charts.js:11 Uncaught TypeError: yScale is not a function 

Answer 1

Sie sind am ehesten mit D3 v4, während das Beispiel auf v3 aufgebaut ist. Da v4 im Gegensatz zu v3 jetzt modular ist, wurden die Namensräume abgeflacht. Nach dem change log für die lineare Skala bedeutet dies:

• d3.scale.linear ↦ d3.scaleLinear

Da d3.scale undefiniert ist, gibt es .linear keine Eigenschaft von ihm gelesen werden, damit der Fehler auf. Ändern Sie Ihren Code in

var yScale = d3.scaleLinear().domain([0, 390]).range([0,100]); 

um es zum Laufen zu bringen.