Question

在D3代码（版本4）中，我试图补间SVG文本中的数字。我刚拿到NaN。

totTotal的值为700

g.append("g")
.attr("transform", "translate(450,68)")
.append ("text")
.attr("text-anchor","middle")
.attr("alignment-baseline","central")
.attr("class", "hsidebar")
.transition()
.duration(2000)
.tween("text",testtween(totTotal));

function testtween(a) {
    console.log('in'+ a);
    var i = d3.interpolateNumber(1, a);
    return function(t) {
    d3.select(this).text(i(t));
  };

}

请让我知道我做错了什么。

谢谢，

Answer 1

tween函数采用函数，返回另一个函数。你正在给它返回一个函数。所以，我们需要将它包装在另一个函数中：

function testtween(a){
  return function() {
    var node = d3.select(this),
        i = d3.interpolateNumber(1, a);
    return function(t) {
      node.text(i(t));
    };
  };
}

运行代码：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
    var g = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);
      
    var totTotal = 700;

    g.append("g")
      .attr("transform", "translate(450,68)")
      .append("text")
      .attr("text-anchor", "middle")
      .attr("alignment-baseline", "central")
      .attr("class", "hsidebar")
      .transition()
      .duration(2000)
      .tween("text", testtween(700));

    function testtween(a){
      return function() {
        var node = d3.select(this),
            i = d3.interpolateNumber(1, a);
        return function(t) {
          node.text(i(t));
        };
      };
    }
  </script>
  </body>

</html>

＆＃13;

d3补间文本返回NaN

1 个答案: