StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POd3 'call' method not working
text
Body
copied!<p>I am using d3 to animate a bar graph on a web page, and am trying to use the selection.call feature with limited success. I have defined all my enter transitions for the various parts of the graph like so:</p> <pre><code> var xAxisEnterTransition = function(selection){ //None }; var bottomBarsEnterTransition = function(selection){ selection.transition() .duration(900) .delay(function (d, i) { return i * 300; }) .attr("y", function (d) { return maxBarHeight - y(d['without']); }) .attr("height", function (d) { return y(d['without']); }); }; var markerLinesEnterTransition = function(selection){ //None }; var topBarsEnterTransition = function(selection){ selection.transition() .duration(200) .delay(function (d, i) { return i * 300; }) .attr("y", function (d) { return maxBarHeight - y(d['with'] + d['without']); }) .attr("height", function (d) { return y(d['with']); }); }; var bubblesEnterTransition = function(selection){ selection.transition() .duration(400) .ease('elastic') .delay(function (d, i) { return i * 300 }) .attr("r", bubbleRadius); }; var violationTextEnterTransition = function(selection){ selection.transition() .duration(400) .delay(function (d, i) { return i * 300 }) .style("stroke-opacity", 1.0) .style("fill-opacity", 1.0); }; var severityTextEnterTransition = function(selection){ selection.transition() .duration(400) .delay(function (d, i) { return i * 300 }) .style("stroke-opacity", 1.0) .style("fill-opacity", 1.0); }; </code></pre> <p>So that I have nice, neat, reusable code. When I call these functions, I do so like this, as specified in the d3 documentation:</p> <pre><code> bottomBars.call(bottomBarsEnterTransition) .each("end", function () { topBars.call(topBarsEnterTransition) .each("end", function () { bubbles.call(bubblesEnterTransition); violationText.call(violationTextEnterTransition); severityText.call(severityTextEnterTransition); }); }); </code></pre> <p>And when I do so, the bottomBarsEnterTransition seems to execute correctly on the page, but then the animation just stops. A check with the debugger reveals that an exception has been thrown inside the d3 code itself:</p> <pre><code>SCRIPT438: Object doesn't support property or method 'call' d3.v3.min.js, line 3 character 8323 </code></pre> <p>with the call stack revealing that the offending call was kicked off by the first .each method call.</p> <p>Now, I know I can work around this issue by writing transitions this way:</p> <pre><code>bottomBarsEnterTransition(bottomBars); </code></pre> <p>but I <em>need</em> to be able to use the each method so that my transitions execute in the proper order.</p> <p>Am I doing something wrong here, or is this some issue with d3?</p> <p><strong>UPDATE:</strong></p> <p>The error appears not to be with 'call' at all...if I call each 'call' method on its own line, the graph renders fine, albeit not in the order I need it to. So, it appears to be the 'each' calls that are causing the problem. </p> <p>Hope that helps provide a little more insight, and thanks in advance for the help.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload