D3 JSは3つの新しいキー値ペアを持つ新しいテキストボックスを追加します

Question

私はD3 JSを初めて使用しています。私は自分の問題に適したソリューションを作るのに苦労しています。

グラフに別々のデータセット変数から新しいデータセットを追加したいと思います。最大5つの値で、別々の行に表示されます。

色の付いた四角形と凡例の名前を削除した後、以前の凡例の前に新しい値が中央に表示されるようにします。

var dataset = [ 
{ name: 'IE', percent: 39.10 }, 
{ name: 'Chrome', percent: 32.51 }, 
{ name: 'Safari', percent: 13.68 }, 
{ name: 'Firefox', percent: 8.71 }, 
{ name: 'Others', percent: 6.01 } 
]; 

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

var w=300,h=300; 

var outerRadius=w/2; 
var innerRadius=100; 

var color = d3.scale.category10(); 

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

var svg=d3.select("#chart") 
    .append("svg") 
    .attr({ 
     width:w, 
     height:h, 
     class:'shadow' 
    }).append('g') 
    .attr({ 
     transform:'translate('+w/2+','+h/2+')' 
    }); 
var path=svg.selectAll('path') 
    .data(pie(dataset)) 
    .enter() 
    .append('path') 
    .attr({ 
     d:arc, 
    fill:function(d,i){ 
     return color(d.data.name); 
    } 
    }); 

path.transition() 
    .duration(1000) 
    .attrTween('d', function(d) { 
     var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d); 
     return function(t) { 
      return arc(interpolate(t)); 
     }; 
    }); 


var restOfTheData=function(){ 
    var text=svg.selectAll('text') 
     .data(pie(dataset)) 
     .enter() 
     .append("text") 
     .transition() 
     .duration(200) 
     .attr("transform", function (d) { 
      return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .attr("dy", ".4em") 
     .attr("text-anchor", "middle") 
     .text(function(d){ 
      return d.data.percent+"%"; 
     }) 
     .style({ 
      fill:'#fff', 
      'font-size':'10px' 
     }); 

    var legendRectSize=20; 
    var legendSpacing=7; 
    var legendHeight=legendRectSize+legendSpacing; 


    var legend=svg.selectAll('.legend') 
     .data(color.domain()) 
     .enter() 
     .append('g') 
     .attr({ 
      class:'legend', 
      transform:function(d,i){ 
       //Just a calculation for x & y position 
       return 'translate(-35,' + ((i*legendHeight)-65) + ')'; 
      } 
     }); 
    legend.append('rect') 
     .attr({ 
      width:legendRectSize, 
      height:legendRectSize, 
      rx:20, 
      ry:20 
     }) 
     .style({ 
      fill:color, 
      stroke:color 
     }); 

    legend.append('text') 
     .attr({ 
      x:30, 
      y:15 
     }) 
     .text(function(d){ 
      return d; 
     }).style({ 
      fill:'#929DAF', 
      'font-size':'14px' 
     }); 
}; 

setTimeout(restOfTheData,1000); 

これは、サイトからのコードです：

http://www.adeveloperdiary.com/d3-js/create-a-simple-donut-chart-using-d3-js/

Answer 1

元のデータセットは、ファイルの先頭に発見された：

var dataset = [ 
     { name: 'IE', percent: 39.10 }, 
     { name: 'Chrome', percent: 32.51 }, 
     { name: 'Safari', percent: 13.68 }, 
     { name: 'Firefox', percent: 8.71 }, 
     { name: 'Others', percent: 6.01 } 
]; 

あなたはそれをこのように変更することができ、あなたのデータを単に追加するだけで（名前と値を変更したことに気付きました）。このコードは、必要な数の行をサポートしますが、パーセンテージの計算は実装されていないことに注意してください。したがって、合計値を100にすることをお勧めします。ここ

var dataset = [ 
     { name: 'foo', percent: 59 }, 
     { name: 'bar', percent: 31 }, 
     { name: 'lorem', percent: 8 }, 
     { name: 'ipsum', percent: 2 } 
    ]; 

は、これを実現するオリジナルcodepenのフォークである：

http://codepen.io/anon/pen/XRxjxo