2つ目のD3円グラフをhtmlで表示できません

Question

d3で作成された2つの円グラフを表示したいhtmlページがあります。個々の円グラフを個別に表示することはできますが、両方を並べて表示しようとすると、2番目のグラフは空白になります。最初のものは上手く来る。これらの円グラフは、からJavaScriptで作成された

：

https://bl.ocks.org/mbostock/3887235

主な違いは、私は、ファイル内のJavaScriptを入れて、機能を中心に

機能piechart2それを入れ子にしているということです（）{...}

私はそれぞれのパイチャートを自分の上に表示できますが、両方の円グラフを並べて表示します。この作品

<div class="row"> 
    <h3 align="center" >Connect</h3> 
     <div class="row placeholders"> 
     <div class="col-md-offset-2"> 
      <svg width="300" height="200"></svg> 
      <script>piechart()</script> 
     </div> 
</div> 

が、しかし、これだけ表示さpiechar1をパイchart2

 <div class="row"> 
    <h3 align="center" >Connect</h3> 
     <div class="row placeholders"> 
     <div class="col-md-offset-2"> 
      <svg width="300" height="200"></svg> 
      <script>piechart2()</script> 
     </div> 
</div> 

を表示するには：

これはパイグラフ1を表示するように動作します。開発者ツールを見ると、piechar2があるはずのスペースが空白であることがわかります。

私が持っている私のファイルの頭に

<div class="row"> 
    <h3 align="center" >Connect</h3> 
     <div class="row placeholders"> 
     <div class="col-md-offset-2"> 
      <svg width="300" height="200"></svg> 
      <script>piechart()</script> 
      <script>piechart2()</script> 
     </div> 
</div> 

：

<script type="text/javascript" src="static/donut.js"></script> 
<script type="text/javascript" src="static/donut2.js"></script> 

ここではjavascriptのです。 2つのJSファイルbewteen唯一の違いは、1つの円グラフ（）/ piechart2（）と「静的/データ」/「静的/ DATA2」

function piechart() { 
var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    radius = Math.min(width, height)/2, 
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var color = d3.scaleOrdinal(["#0600f3","#f30000","#00b109"]); 

var pie = d3.pie() 
    .sort(null) 
    .value(function(d) { return d.population; }); 

var path = d3.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

var label = d3.arc() 
    .outerRadius(radius - 40) 
    .innerRadius(radius - 40); 

d3.csv("static/data.csv?x="+new Date().getTime(), function(d) { 
    d.population = +d.population; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    var arc = g.selectAll(".arc") 
    .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    arc.append("path") 
     .attr("d", path) 
     .attr("fill", function(d) { return color(d.data.population); }); 

    arc.append("text") 
     .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.population ; }); 

}); 


} 

私は呼び出すことにより、スクリプトに円グラフを追加しているを持っていることですjavacript関数：

<script>piechart()</script> 
<script>piechart2()</script> 

思考？ ありがとうございます！

Answer 1

ここでの問題は、jsファイルの両方が、円グラフをhtmlドキュメント内の同じsvg要素領域に追加しようとしていることです。したがって、本質的に同じ領域に2つの異なる円グラフを描画しようとする2つの関数があります。

これを避ける1つの方法は、2 svgの要素を持ち、idsとすることです。これにより、idに基づいてDOMの選択を行うことができます。

<div class="row"> 
    <h3 align="center" >Connect</h3> 
     <div class="row placeholders"> 
     <div class="col-md-offset-2"> 
      <svg width="300" height="200" id="svg1"></svg> 
      <svg width="300" height="200" id="svg2"></svg> 
      <script>piechart()</script> 
      <script>piechart2()</script> 
     </div> 
</div> 

をそして、あなたは、グラフを描画するための領域を選択する必要があるときに、あなたはあなたの第二のファイルにあなたの最初のファイルでd3.select("#svg1")とd3.select("#svg2")を選んだことができます。だから、このような何かを試すことができます。