D3グラフが表示されない

これまでのような質問には以前から回答がありましたが、正直なところ私は何時間も探していましたが、答えが見つからず、ブラウザに簡単なD3画像が表示されませんでした。私は文字通り、ブラウザにD3棒グラフを表示したいだけです。D3グラフが表示されない

ここに私のファイルがあります。これは単にhereからコピーして貼り付けたものです。

Index.htmlと

<!DOCTYPE html> 
<html> 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script src="app.js" type="text/javascript"></script> 
<link rel = "stylesheet" 
    type = "text/css" 
    href = "app.css" /> 
<div class="chart"></div> 
</html>

app.js

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

app.css

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

私はindex.htmlをを開きますブラウザ（クロム）私は何も見ません。私はthis postとthis postの指示に従ってみましたが、まだ何も見ません。

この単純なグラフを表示するにはどうすればよいですか？あなたの助けが大変ありがとうございます。ファイルIndex.htmlとにこれらの行を追加して、あなたのアプリで

出典

2017-08-25 Jon Deaton

** **投稿された** Index.html **は、** app.js **または** app.css **にはリンクされません。 –

申し訳ありませんが、意味があります。私は ''を追加しましたが、私はまだ何も見ていません。 –

私の答えを見てください。 –

リンク：ページがロードされているまで、それが実行されないように

<script src="app.js"></script> 
<link rel="stylesheet" href="app.css">

は、DOMContentLoadedイベントであなたのD3コードをラップ：

document.addEventListener('DOMContentLoaded', function(e) { 
    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; }); 

});

出典

2017-08-25 19:04:16

ありがとう、これは完全に動作します。 –

D3グラフが表示されない

答えて

関連する問題