javascript - D3 气泡图 - 'cannot read property ' map' of undefined'

Question

我正在尝试使用 D3 构建一个相当简单的气泡图，但出现了一个错误，让我相信数据没有被正确读取。希望得到一些帮助!这是我的图表代码:

scope.loadChart = function(){

      chart.append("div").attr("class", "chart")
      .selectAll('div')
      .data(scope.data).enter().append("div")
      .attr("class", "bar")
      .transition().ease("elastic")
      .style("width", function(d) { return d.cost + "%"; })
      .text(function(d) { return d.playerName +" $"+ d.cost; });
      //a little of magic: setting it's width based
      //on the data value (d)
      //and text all with a smooth transition

      // *******************************************************

      var diameter = 500, //max size of the bubbles
      color    = d3.scale.category20b(); //color category

      var bubble = d3.layout.pack()
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5);

      var svg = d3.select("body")
      .append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .attr("class", "bubble");

      function render(error, data){

        //convert numerical values from strings to numbers
        data = data.map(function(d){ d.value = +d.count; return d; });

        //bubbles needs very specific format, convert data to this.
        var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

        //setup the chart
        var bubbles = svg.append("g")
        .attr("transform", "translate(0,0)")
        .selectAll(".bubble")
        .data(nodes)
        .enter();

        //create the bubbles
        bubbles.append("circle")
        .attr("r", function(d){ return d.r; })
        .attr("cx", function(d){ return d.x; })
        .attr("cy", function(d){ return d.y; })
        .style("fill", function(d) { return color(d.value); });

        //format the text for each bubble
        bubbles.append("text")
        .attr("x", function(d){ return d.x; })
        .attr("y", function(d){ return d.y + 5; })
        .attr("text-anchor", "middle")
        .text(function(d){ return d.name; })
        .style({
          "fill":"white",
          "font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
          "font-size": "12px"
        });
      };
      render(testData)
    };

    scope.loadChart();

我传入的数据基本上是这样的:

testData = [{'name':'name1','count':1},{'name':'name2','count':2},{'name':'name3','count':3}]

当我尝试运行它时，出现错误“TypeError: Cannot read property 'map' of undefined”，该错误发生在渲染函数的第一行。我有点假设这是由于数据的格式？但老实说，我不确定，并且会喜欢任何可能的帮助。如果我可以提供更多信息，请告诉我。

非常感谢!

Answer 1

在您的 render 函数中，它应该加载数据并绘制内容，参数是 function render(error, data){}。

但是当这个函数被调用时，参数作为render(testData)传递。这意味着 data 参数为空，这会导致 TypeError: Cannot read property 'map' of undefined 因为在 data = data.map(function(d) { d.value = +d.count; return d; });，data参数不是实际数据，而是undefined。