d3バブルチャートにデータを追加する方法は？

Question

私は私のD3バブルチャートにデータを追加したい...しかし、私は、データに追加する方法がわからない...

私はいくつかのコードを使用：

VAR JDataの= {テキスト：「TEST」を、
bubbleChart.options.data.items.push（JDataの[0]）
等....

"100"}私は新しく追加されたサークル（バブル）を追加する方法

を傾ける：COUNT私のd3バブルチャートのデータ？

var bubbleChart = new d3.svg.BubbleChart({ 
    supportResponsive: true, 

    size: 600, 

    innerRadius: 600/3.5, 

    radiusMin: 50, 

    data: {   
     items: [ 
     //not add !!!! not this 
     {text: "Php", count: "170"}, 
     {text: "Ruby", count: "123"}, 
     {text: "D", count: "12"}, 
     {text: "Python", count: "170"}, 
     {text: "C/C++", count: "382"}, 
     {text: "Pascal", count: "10"}, 
     {text: "Something", count: "170"}, 
     ], 

     eval: function (item) {return item.count;}, 
     classed: function (item) {return item.text.split(" ").join("");} 
    }, 
    plugins: [ 
     { 
     name: "central-click", 
     options: { 
      text: "(See more detail)", 
      style: { 
      "font-size": "12px", 
      "font-style": "italic", 
      "font-family": "Source Sans Pro, sans-serif", 
      //"font-weight": "700", 
      "text-anchor": "middle", 
      "fill": "white" 
      }, 
      attr: {dy: "65px"}, 
      centralClick: function() { 
      alert("Here is more details!!"); 
      } 
     } 
     }, 
     { 
     name: "lines", 
     options: { 
      format: [ 

      {// Line #0 
       textField: "count", 
       classed: {count: true}, 
       style: { 
       "font-size": "28px", 
       "font-family": "Source Sans Pro, sans-serif", 
       "text-anchor": "middle", 
       fill: "white" 
       }, 
       attr: { 
       dy: "0px", 
       x: function (d) {return d.cx;}, 
       y: function (d) {return d.cy;} 
       } 
      }, 
      {// Line #1 
       textField: "text", 
       classed: {text: true}, 
       style: { 
       "font-size": "14px", 
       "font-family": "Source Sans Pro, sans-serif", 
       "text-anchor": "middle", 
       fill: "white" 
       }, 
       attr: { 
       dy: "20px", 
       x: function (d) {return d.cx;}, 
       y: function (d) {return d.cy;} 
       } 
      } 
      ], 
      centralFormat: [ 
      {// Line #0 
       style: {"font-size": "50px"}, 
       attr: {} 
      }, 
      {// Line #1 
       style: {"font-size": "30px"}, 
       attr: {dy: "40px"} 
      } 
      ] 
     } 
     }] 

    }); 

Answer 1

は、あなたはおそらく、あなたは配列にデータを追加した後のvar bubblechartを再実行したい、新しいデータを追加しようとする前に、すべての作品と仮定します。これはおそらく最も簡単な方法です

var data = {...}//move data outside bubblechart generator 
function bubblechart (data) = { 
d3.selectAll("svg ").remove()//remove previous graph 
... //create bubblechart 
...} 

var JData={text:"TEST", count:"100"} 
data.push(JData[0]) 
bubblechart(data) 

、しかし、あなたはおそらく、新しいものに再びそれらすべてを追加するのではなく、昔の泡のサイズを変更するには、いくつかのトランジションを追加することができます。

私のアプローチは次のようになります。