如何在d3氣泡圖中添加數據？

Question

我想在我的D3氣泡圖中添加數據...但我不知道如何添加到資料...

我使用了一些代碼：

VAR JData = {文字：「TEST」，數： 「100」}
bubbleChart.options.data.items.push（JData [0]）
等....

，但我不能添加新圈（氣泡）

如何添加數據在我的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

假設一切正常您嘗試添加新的數據之前，那麼你可能要重新運行該變種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) 

這可能是最簡單的方法，但你很可能在加一些過渡到調整舊泡沫，而不是用新的再次加入他們。