2016-08-09 8 views
9

Z jakiegoś powodu otrzymuję d3.scale jest niezdefiniowany. D3 jest poprawnie załadowany; Używam jednego wymienione na stronie głównej d3js.org here.Pierwsze d3.scale jest niezdefiniowane - działa w codepen

Mój plik JS przenoszenia kodu D3:

InitiateChart_1(); 

function InitiateChart_1() 
{ 
    var data = [5,10,15,20,25]; 
    var height = 500, width = 500; 

    var xScale = d3.scale.linear() 
     .domain([0,60]) 
     .range([0,width]); 

    var canvas = d3.select("body") 
     .append("svg") 
     .attr("id","chart1") 
     .attr("width",width) 
     .attr("height",height); 

    var bars = canvas.selectAll("rect") 
     .data(data) 
     .enter() 
      .append("rect") 
      .attr("height",10) 
      .attr("width",function(d){return xScale(d);}) 
      .attr("y",function(d,i){return i * 12;}) 
} 

Mój cały plik HTML:

<!doctype html> 
<html> 
<head> 
    <title>SHED Report Prototype</title> 
    <meta charset='utf-8'> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 
<body> 
    <script src='js/studentloans.js'></script> 
</body> 
</html> 

Każda pomoc jest znacznie docenione.

+0

Możliwy duplikat [nieokreślonej d3.scale w maszynopisie] (http://stackoverflow.com/questions/38218891/undefined-d3-scale-in-typescript) –

Odpowiedz

28

Węzeł kodowy używa wersji 3; ten kod używa wersji 4 interfejsu API. d3.scale.linear został d3.scaleLinear.

[...] Nie ma jednak jedną nieuniknioną konsekwencją przyjęcia modułów ES6: każdy symbol w D3 4.0 teraz dzieli nazw płaski zamiast zagnieżdżonego jednego D3 3.x. Na przykład: d3.scale.linear jest teraz d3.scaleLinear, a d3.layout.treemap jest teraz d3.treemap. [...]

- https://github.com/d3/d3/blob/master/CHANGES.md (Kopalnia nacisk)

+0

Dziękuję. Myślałem, że próbowałem tego bezskutecznie; jednak udało się. –

3

Zastosowanie d3.scaleLinear nie d3.scale.linear. To jest tylko dla starej wersji d3.js

Powiązane problemy