Question

我想在我的d3气泡图中添加数据......但我不知道如何添加数据...

我使用了一些代码：

var JData = {text：“TEST”，count：“100”}
bubbleChart.options.data.items.push（JData [0]）
等....

但我无法添加新的Circle（泡泡）

如何在我的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气泡图。

我的方法是：

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)

这可能是最简单的方法，但你可以添加一些过渡来调整旧气泡的大小，而不是再用新的气泡再添加它们。

如何在d3气泡图中添加数据？

1 个答案: