D3.js基本グラフ描画例が表示されない

Javascriptを初めて使用しており、データをオンラインで視覚化するためにD3ライブラリを使用したいと考えています。D3.js基本グラフ描画例が表示されない

データの配列から簡単な棒グラフを描くことに関する多くの例がウェブ上にあります。次の例では、しかし、動作しませんし、それだけで空白のWebページが返されます。

<!DOCTYPE html> 
     <meta charset="utf-8"> 
     <style> 

     .chart div { 
     font: 10px sans-serif; 
     background-color: steelblue; 
     text-align: right; 
     padding: 3px; 
     margin: 1px; 
     color: white; 
    } 

    </style> 
    <div class="chart"></div> 
    <script src="http://d3js.org/d3.v4.js"></script> 
<script> 
    var data = [4, 8, 15, 16, 23, 42]; 

    var x = d3.scale.linear() 
     .domain([0, d3.max(data)]) 
     .range([0, 420]); 
    d3.select(".chart") 
     .selectAll("div") 
     .data(data) 
     .enter().append("div") 
     .style("width", function(d) { return x(d) + "px"; }) 
     .text(function(d) { return d; }); 
    </script>

が、これはソーススクリプト（http://d3js.org/d3.v4.js）または多分、ブラウザに問題がある可能性がありましたか？助けをいただければ幸いです。

よろしくお願いいたします。

出典

2016-08-07 S.GALILEO

D3バージョンライブラリをロードしているときには、D3バージョンメソッドを呼び出しています。単純に置き換える：

d3.scale.linear()

で：

d3.scaleLinear()

changes docsから：

を...あなたはモジュール性を気にしない場合、あなたは主にこのを無視することができますデフォルトのバンドルを変更してそのまま使用してください。ただし、ES3モジュールを採用すると避けられない結果になります：D3 4.0のすべてのシンボルは、D3 3.xのネストされた名前空間ではなくフラットな名前空間を共有するようになりました。例えば、d3.scale.linearは...今d3.scaleLinearある

全コード：

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    .chart div { 
 
    font: 10px sans-serif; 
 
    background-color: steelblue; 
 
    text-align: right; 
 
    padding: 3px; 
 
    margin: 1px; 
 
    color: white; 
 
    } 
 
</style> 
 
<div class="chart"></div> 
 
<script src="http://d3js.org/d3.v4.js"></script> 
 
<script> 
 
    var data = [4, 8, 15, 16, 23, 42]; 
 

 
    var x = d3.scaleLinear() 
 
    .domain([0, d3.max(data)]) 
 
    .range([0, 420]); 
 
    d3.select(".chart") 
 
    .selectAll("div") 
 
    .data(data) 
 
    .enter().append("div") 
 
    .style("width", function(d) { 
 
     return x(d) + "px"; 
 
    }) 
 
    .text(function(d) { 
 
     return d; 
 
    }); 
 
</script>

出典

2016-08-07 15:31:33 Mark

D3.js基本グラフ描画例が表示されない

答えて

関連する問題