D3圖生成每次訪問標籤

Question

我已經將D3腳本添加到我的web應用程序，它是由angularjs開發的。 繪製了D3圖形，但每次訪問選項卡時都會出現多個圖形。

下面是我使用的腳本。

<script type="text/javascript"> 

     data = [{"value":200}, 
      {"value":100}]; 

     var w = 300, 
     h = 300, 
     r = 100, 
     color = d3.scale.category20c(); 

     /*var canvas = d3.select("body").append("svg:svg").data([data]) 
       .attr("width", w) 
       .attr("height", h) 
       .append("svg:g") 
       .attr("transform", "translate(" + r + "," + r + ")")*/ 

     var canvas = d3.select("body svg:svg"); 
     if(!svg){ 
    canvas = d3.select("body") 
      .append("svg:svg").data([data]) 
        .attr("width", w) 
        .attr("height", h) 
        .append("svg:g") 
        .attr("transform", "translate(" + r + "," + r + ")") 
     } 

     var arc = d3.svg.arc() 
      .outerRadius(r); 

     var pie = d3.layout.pie() 
      .value(function(d) { return d.value; }); 

     var arcs = canvas.selectAll("g.slice") 
      .data(pie) 
      .enter() 
      .append("svg:g") 
      .attr("class", "slice"); 

     arcs.append("svg:path") 
      .attr("fill", function(d, i) { return color(i); }) 
      .attr("d", arc); 

     arcs.append("svg:text") 
      .attr("transform", function(d) { 
      d.innerRadius = 0; 
      d.outerRadius = r; 
      return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .attr("text-anchor", "middle") 
     .text(function(d, i) { return data[i].value; }); 

    </script> 

我加入這個腳本，我想訪問特定標籤後，顯示graph.but圖爲展現在我的應用程序的每個選項卡中的視圖。

如以上圖像的grpagh產生到標籤/視圖每次訪問。

任何人都可以幫助我。

感謝

Answer 1

爲什麼你不希望使用獨特元素與ID爲您的圖表？

var canvas = d3.select("body svg:svg"); 
    if(!svg){ 
canvas = d3.select("body") 

嘗試將其更改爲類似

var canvas = d3.select("#yourId svg:svg"); 
    if(!svg){ 
canvas = d3.select("#yourId") 

而且<div id='yourId'></div>標籤加入標籤，您的圖表應該是

Answer 2

嘗試渲染另一個SVG

d3.select("svg").remove(); 

之前移除SVG