javascript - D3。匿名函数中的变量声明

Question

匿名函数内部有声明的变量，当返回该变量时。问题是我似乎无法使用该变量，因为当我尝试返回它时 firebug 说: TypeError: myData is undefined 。

---

这是我的代码:

select("circle")
    .transition()
    .attr("r", function(d) { 
                var myData = d3.select(this).datum();
                return myData[0];
    } )
    .duration(1000);

return myData[0]; 确实返回了第一个数组元素，但是我的动画只用了不到 1 秒，这意味着 .duration(1000); 没有不会被调用，因为 return myData[0]; 中存在错误，这有点令人费解。

这就是我在尝试制作动画之前将数据附加到该圆圈的方式:

  var valuesMatrix = [];
  valuesMatrix[0] = [35, 21, 45, 71, 51, 32];

  d3.selectAll("circle")
    .data(valuesMatrix);

为什么 return myData[0]; 被认为是未声明的，即使它返回了有效值。

---

更新。按下矩形以查看圆形动画:

var svgContainer = d3.select("body").append("svg")
                                  .attr("width", 200)
                                  .attr("height", 200);

svgContainer.append("circle")
                        .attr("cx", 40)
                        .attr("cy", 40)
                        .attr("r", 20);

var valuesMatrix = [];
  valuesMatrix[0] = [35, 21, 45, 71, 51, 32];

svgContainer.selectAll("circle")
    .data(valuesMatrix);

svgContainer.append("rect")
                   .attr("x", 90)
                   .attr("y", 10)
                   .attr("width", 80)
                   .attr("height", 20)
                   .on("click", function(d) {
                          var selectedGroups = d3.selectAll("circle")
                              .transition()
                              .attr("r", function(d) { 
                                    var myData = d3.select(this).datum();
                                    // return d[0];
                                    return myData[0];
                                } )
                          .duration(2000);
                     });

此代码已准备好 jsfiddle。好像有效果

http://jsfiddle.net/regpast123/axkbLp45/2/

Answer 1

错误消息表明您没有将任何数据绑定(bind)到您选择的元素。此外，您可以简化代码:

.attr("r", function(d) { return d[0]; });