web-dev-qa-db-ja.com

d3.scaleの取得は未定義です-codepenで動作します

何らかの理由で私はd3.scaleは未定義です。 D3は適切にロードされています。私はメインのd3js.orgサイトにリストされているものを使用しています here。

D3コードを処理するJSファイル：

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;})
}

私の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>

どんな助けも大歓迎です。

javascripthtmld3.js
20
Jacob Johnson

Codepenはバージョン3を使用しています。このコードは、APIのバージョン4を使用しています。 d3.scale.linear になった d3.scaleLinear。

[...]ただし、ES6モジュールを採用すると避けられない結果が1つあります。D34.0のすべてのシンボルは、D3 3.xのネストされた名前空間ではなく、フラットな名前空間を共有するようになりました。たとえば、d3.scale.linearはd3.scaleLinearになり、d3.layout.treemapはd3.treemapになりました。 [...]

- https://github.com/d3/d3/blob/master/CHANGES.md （エンファシス鉱山）

53
Quotidian

d3.scaleLinearではなく、d3.scale.linearを使用してください。古いバージョンのd3.jsのみに対応しています

5
Arnav Borborah