Question

在尝试清理我的d3.js代码时，我总是碰壁，因为我不知道如何重用我的变量。

有没有办法获取变量并在注释行中重用它们？

var runStartAnimation = function(){
  d3.selectAll(".allArcs").transition().duration(1500).delay(1000)
  // obviously totaly bad syntax. This is just for clarification.
  // var startAngle = parseFloat(d3.select(this).attr("start"));
  // var endAngle = parseFloat(d3.select(this).attr("end"));

  .tween("d", tweenMoveArc(
    // startAngle,startAngle,startAngle,endAngle
    parseFloat(d3.select(this).attr("start")),
    parseFloat(d3.select(this).attr("start")),
    parseFloat(d3.select(this).attr("start")),
    parseFloat(d3.select(this).attr("end"))
  ));

}

我知道这可能不是最有用的例子，但我希望你理解我的观点。

Answer 1

是的，您可以像保存其他任何变量一样保存它们：

.tween("d", function() {
  var sel = d3.select(this),
      start = parseFloat(sel.attr("start")),
      end = parseFloat(sel.attr("end"));
  return tweenMoveArc(start, start, start, end);
));

Answer 2

语法如下所示：

var runStartAnimation = function(){
   var startAngle = parseFloat(d3.select(this).attr("start")),
       endAngle = parseFloat(d3.select(this).attr("end"));

   d3.selectAll(".allArcs").transition().duration(1500).delay(1000)
      .tween("d", tweenMoveArc(
          startAngle,startAngle,startAngle,endAngle
      ));

}

当您使用.tween时，您将tween方法链接到d3.selectAll(".allArcs").transition().duration(1500).delay(1000)返回的值，因此您无法将变量定义放在这两者之间线。

要记住的重要一点是这些变量的范围是什么。由于它们属于runStartAnimation的范围，因此它们具有调用函数的任何元素的数据，而不是.allArcs选择中每个元素中的数据。如果您希望数据特定于每个元素，则需要定义一个范围为您想要的元素的函数，您可以在其中定义变量并使用它们，如下所示：

 d3.selectAll(".allArcs").transition().duration(1500).delay(1000)
      .tween("d", function(d){
          //We're now in a function scoped to each element in our selection
          var startAngle = parseFloat(d3.select(this).attr("start")),
              endAngle = parseFloat(d3.select(this).attr("end"));

          return tweenMoveArc(startAngle,startAngle,startAngle,endAngle);
      });

如何在d3.js选择中重用变量？

2 个答案: