D3 javascriptがHTML divで実行されていません

私が入手したd3 javascriptファイルを実行しようとしています：bl.ocks.org。私は以下で実行しようとしているコードを投稿しました。私はhtml、css、bootstrap、およびjavascriptにはとても新しいですが、私の理解では、スクリプトは自分のhtmlのこのセクションの中で動くべきです。しかし、ページを読み込むたびに、JavaScriptの内容が緑色の四角形の右側に表示されます（下図参照）。 javascriptファイルが緑色の四角形内で実行されていない理由はありますか？D3 javascriptがHTML divで実行されていません

<!DOCTYPE html> 
<html> 
<head> 
    <script src="../d3/d3.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<style> 
    .graph_options { 
     background-color:rgb(50,150,60); 
     color:rgb(255,255,255); 
     text-align:center; 
     float:left; 
     width:20%; 
     height:50vh; 
    } 
</style> 
<body> 
    <div class="graph_options row-fluid"> 
     <div class="col-sm-3"> 
      <script type="text/javascript" src="../javascript/collision.js" ></script> 
     </div> 
    </div> 
</body> 
</html>

？あなたが使用collision.jsファイルで

出典

2016-06-22 user3709119

あなたはD3のWebサイトからまったく同じコードを使用しましたか？ –

ええ、私はちょうど "スクリプト"括弧内のすべてを取って、別のファイルを作成しました。それ以外はまったく同じです。 – user3709119

あなたの '.graph_options'ルール' positionを与えてみてください：relative' – LGSon

は、このラインがあります：

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

<body>が選択されていると、この要素の終わりに、<svg>要素が追加されます。その後、<svg>にグラフが表示されます。チャート要素を<div>に追加する場合は、本文の代わりにチャート要素を選択することができます。 <div>に一意のIDを追加し、JavaScriptコードを適用します。 collision.jsは、D3.jsを注入した直後にHTMLに追加することができます。セレクタで<div>を選択しているため、チャートを追加する場所に追加する必要はありません。

HTML：

<div id="chart"></div>

はJavaScript：

var svg = d3.select("#chart").append("svg") 
    .attr("width", width) 
    .attr("height", height);

出典

2016-06-22 21:10:09

それでした！ご協力ありがとうございました。私は〜5分であなたの解決策を受け入れるでしょう。 – user3709119

D3 javascriptがHTML divで実行されていません

答えて

関連する問題