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
Ето работещата цигулка с предложението на Gilsha: jsfiddle.net/a2QpA/316 - person eko; 17.05.2016
comment
@thatOneGuy transition.on() е нов за v4 и действа като заместител на transition.each() от v3, което във v4 ще бъде еквивалентно на selection.each(). - person altocumulus; 17.05.2016