d3js Text Transitioin - пример кода не работает

Я новичок в d3.js и пытаюсь выполнить некоторые примеры кода, приведенные в примерах d3. Я попытался скопировать пример кода Text Transition-1 (ссылка). Но наткнулся на эту ошибку в консоли

text-transition.html:26 Uncaught 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.


javascript d3.js dom-events
person jeldikk    schedule 17.05.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема, кажется, с версией d3.

Попробуйте использовать <script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>.

Источник: http://d3js.org/d3.v4.0.0-alpha.23.min.js

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);
  });
h1 {
  font: 400 120px/500px"Helvetica Neue";
  text-align: center;
  width: 960px;
  height: 500px;
  margin: 0;
}
<script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>
<h1>0</h1>

person Gilsha    schedule 17.05.2016
comment
Странно, как это не работает с самой последней версией - person thatOneGuy; 17.05.2016
comment
Вот рабочая скрипта с предложением Гилши: jsfiddle.net/a2QpA/316 - person eko; 17.05.2016
comment
@thatOneGuy transition.on() появился в версии 4 и заменяет transition.each() версии 3, что в версии 4 будет эквивалентно selection.each(). - person altocumulus; 17.05.2016