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}]

当我尝试运行此操作时，我收到错误＆＃34; TypeError：无法读取属性＆＃39; map＆＃39;未定义＆＃34;这发生在渲染函数的第一行。我有点假设这是由于数据的格式？但我老实说不确定，并希望得到任何可能的帮助。如果我能提供更多信息，请告诉我。

非常感谢！

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; });中，数据参数不是实际数据，而是未定义的。

D3气泡图 - ＆＃39;无法读取属性＆＃39; map＆＃39;未定义＆＃39;

1 个答案: