comment ajouter des données dans le graphique à bulles d3?

Question

je veux ajouter des données dans mon graphique à bulles d3 ... mais je ne sais pas comment ajouter des données ...

i utilisé un code:

var jdata = {text: "TEST", compter: "100"}
bubbleChart.options.data.items.push (jdata [0])
etc ....

mais je ne peux pas ajouté nouveau Cercle (bulle)

comment ajouter données dans mon graphique à bulles 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

En supposant que tout fonctionne avant d'essayer d'ajouter de nouvelles données, alors vous voudrez probablement exécuter à nouveau le var BubbleChart une fois que vous avez ajouté des données au tableau.

mon approche serait:

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) 

C'est probablement la façon la plus simple, mais vous pouvez probablement ajouter quelques transitions pour redimensionner les vieilles bulles plutôt que de les ajouter tous à nouveau avec le nouveau.