Functionality

If your d3 code has any functionality(transitions, animations, and timers) that starts on load or when you are using canvas tags then you need to take one more step.

All of this functionality has to be put in a custom event listener we refer to as mount. This will include things like transitions or context for canvas tags. In addition any variables that represent elements on the DOM have to be reselected. As a rule any elements that represent DOM elements in your D3 code are not actual elements on the DOM. Here is an example where the functionality as been placed in the on mount event listener.

// put all functionality that should occur on load inside an on mount function
svg.on("mount", function(){
 applyTransition()
});

function applyTransition() {
    //reselect dom elements that functionality will be applied to
    d3.selectAll("circle")
        .transition()
        .duration(500)
        .delay(function(d) { return d * 40; })
        .each(slide);

    function slide() {
      var circle = d3.select(this);
      (function repeat() {
        circle = circle.transition()
            .attr("cx", width)
          .transition()
            .attr("cx", 0)
            .each("end", repeat);
      })();

    }
}

If you are using timers proceed to the Timers section of the Wiki.

Timers