Question

我是d3.js的新手，并尝试执行d3示例中给出的一些示例代码。我尝试复制Text Transition-1（link）示例代码。但是在控制台中遇到了这个错误

text-transition.html：26未捕获的TypeError： d3.select（...）。transition（...）。duration（...）。on不是函数

这是我执行的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Text Transition animation 1</title>
        <meta charset="utf-8">
        <style>
            h1 {
              font: 400 120px/500px "Helvetica Neue";
              text-align: center;
              width: 960px;
              height: 500px;
              margin: 0;
            }
        </style>
        <script type="text/javascript" src="d3/d3.min.js"></script>
    </head>
    <body>
        <h1>0</h1>
        <script type="text/javascript">
            console.log("the script is executing")
            var format = d3.format(",d");

            d3.select("h1")
              .transition()
                .duration(2500)
                .on("start", function repeat() {

                  d3.active(this)
                      .tween("text", function() {
                        var that = d3.select(this),
                            i = d3.interpolateNumber(that.text().replace(/,/g, ""), Math.random() * 1e6);
                        return function(t) { that.text(format(i(t))); };
                      })
                    .transition()
                      .delay(1500)
                      .on("start", repeat);
                });

        </script>
    </body>
</html>

我使用的d3js版本是3.5.17。在Google Chrome浏览器上执行代码段。提前致谢

Answer 1

问题似乎与d3版本有关。

尝试使用$return(number)。

来源：http://d3js.org/d3.v4.0.0-alpha.23.min.js

＆＃13;

<script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>

＆＃13;

console.log("the script is executing")
var format = d3.format(",d");

d3.select("h1")
  .transition()
  .duration(2500)
  .on("start", function repeat() {

    d3.active(this)
      .tween("text", function() {
        var that = d3.select(this),
          i = d3.interpolateNumber(that.text().replace(/,/g, ""), Math.random() * 1e6);
        return function(t) {
          that.text(format(i(t)));
        };
      })
      .transition()
      .delay(1500)
      .on("start", repeat);
  });

＆＃13;

h1 {
  font: 400 120px/500px"Helvetica Neue";
  text-align: center;
  width: 960px;
  height: 500px;
  margin: 0;
}

＆＃13;

d3js Text Transitioin - 1个示例代码不起作用

1 个答案: