同じHTMLページで同じD3チャートを複数回表示する

Question

D3チャートでは、同じHTMLページで同じ種類のD3-Chartを複数回描画する可能性を探究しています。前にそれにいくつかの解決策があります.. ありがとう。

D3.htm

<div class="row shadow"> 
    <div id="chart" class="chart-container" style="margin-left: 12%;"> 
</div> 

および関連JavascriptをD3.js

var createGradient=function(svg,id,color1,color2){ 

     var defs = svg.append("svg:defs") 

     var red_gradient = defs.append("svg:linearGradient") 
       .attr("id", id) 
       .attr("x1", "0%") 
       .attr("y1", "0%") 
       .attr("x2", "50%") 
       .attr("y2", "100%") 
       .attr("spreadMethod", "pad"); 

     red_gradient.append("svg:stop") 
       .attr("offset", "50%") 
       .attr("stop-color", color1) 
       .attr("stop-opacity", 1); 

     red_gradient.append("svg:stop") 
       .attr("offset", "100%") 
       .attr("stop-color", color2) 
       .attr("stop-opacity", 1); 
    }; 

    var percent = 95; 

    var ratio=percent/100; 

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

    var w=150,h=150; 

    var outerRadius=(w/2)-10; 
    var innerRadius=70; 
    if(percent <= 50){ 
    var color = ['#f72067','#ea0707','white']; 
    }else if(percent <= 75){ 
    var color = ['#d9ff1e','#fcf802','white']; 
    }else{ 
    var color = ['#30ff89','#00ff08','white']; 
    } 

    var svg=d3.select("#chart") 
      .append("svg") 
      .attr({ 
       width:w, 
       height:h, 
       class:'shadow' 
      }).append('g') 
      .attr({ 
       transform:'translate('+w/2+','+h/2+')' 
      }); 

    createGradient(svg,'gradient',color[0],color[1]); 

    var arc=d3.svg.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(0) 
      .endAngle(2*Math.PI); 

    var arcLine=d3.svg.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(0); 


    var pathBackground=svg.append('path') 

      .attr({ 
       d:arc 
      }) 
      .style({ 
       fill:color[2] 
      }); 


    var pathChart=svg.append('path') 
      .datum({endAngle:0}) 
      .attr({ 
       d:arcLine 
      }) 
      .style({ 
       fill:'url(#gradient)' 
      }); 

    var middleCount=svg.append('text') 
      .text(function(d){ 
       return d; 
      }) 

      .attr({ 
       class:'middleText', 
       'text-anchor':'middle', 
       dy:15, 
       dx:-05 
      }) 
      .style({ 
       fill:color[1], 
       'font-size':'40px' 

      }); 
     svg.append('text') 
      .text('%') 
      .attr({ 
       class:'percent', 
       'text-anchor':'middle', 
       dx:25, 
       dy:-5 

      }) 
      .style({ 
       fill:color[1], 
       'font-size':'20px' 

      }); 

    var arcTween=function(transition, newAngle) { 
     transition.attrTween("d", function (d) { 
      var interpolate = d3.interpolate(d.endAngle, newAngle); 
      var interpolateCount = d3.interpolate(0, percent); 
      return function (t) { 
       d.endAngle = interpolate(t); 
       middleCount.text(Math.floor(interpolateCount(t))); 
       return arcLine(d); 
      }; 
     }); 
    }; 


    var animate=function(){ 
     pathChart.transition() 
       .duration(750) 
       .ease('cubic') 
       .call(arcTween,((2*Math.PI))*ratio); 


    }; 




    setTimeout(animate,0); 
/*This End of D3 Radial progress Bar-Cart*/ 

であると私はaccatuall何のより明確にするための画像で表示されたいです以下

Answer 1

dom-idをパラメータとして持つ関数内のすべてをラップし、その関数を複数回呼び出します。

<div id="chart1" style="height: 300px;"></div> 
<div id="chart2" style="height: 300px;"></div> 

JS：

$(document).ready(function() { 
    var gradient = function(domId) { 
    [ YOUR CODE ] 
    } 

    gradient("chart1") 
    gradient("chart2") 
}); 

私はあなたのためのplunkrでそれを入れている：FYI https://plnkr.co/edit/AD2W1Sadxwp0nuvuNIIM?p=preview

：あなたがしているD3のバージョンを指定する必要がありそう（HTML）のようなを使用して。 v3とv4はかなり異なっており、互換性はありません。