無法在html中顯示兩個D3餅圖中的第二個

Question

我有一個html頁面，我想要顯示兩個各自通過d3創建的餅圖。我可以單獨顯示每個餅圖，但是，當我試圖並排顯示它們時，第二個是空白的。第一個來的很好。

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

的主要區別是，我已經把文件中的JavaScript和嵌套它繞在一個函數

功能piechart2：

這些餅圖是通過javascript中創建（）{...}

我可以自己顯示每個餅圖，但我似乎無法看到並排展示兩個餅圖。

本工程以顯示餡餅chart1：

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

本工程以顯示餡餅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> 

然而，這只是顯示piechar1。當您查看開發人員工具時，可以看到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。 bewteen兩個js文件的唯一的區別是一個有餅圖（）/ piechart2（）和「靜態/數據」 /「靜態/數據2」

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

}); 


} 

我通過調用添加餅圖腳本javascript功能：

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

想法？ 在此先感謝！

Answer 1

這裏的問題在於，兩個js文件都試圖將餅圖添加到HTML文檔中相同的svg元素區域。所以基本上你有2個函數試圖在同一個區域繪製2個不同的餅圖。

避免這種情況的一種方法是獲得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")。