Question

我正在使用d3为网页上的条形图设置动画，并尝试使用selection.call功能，但成效有限。我为图的各个部分定义了所有输入转换，如下所示：

    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);
    };

这样我就拥有了漂亮，整洁，可重用的代码。当我调用这些函数时，我这样做，如d3文档中所指定的那样：

  bottomBars.call(bottomBarsEnterTransition)
            .each("end", function () {
                topBars.call(topBarsEnterTransition)
                .each("end", function () {
                    bubbles.call(bubblesEnterTransition);
                    violationText.call(violationTextEnterTransition);
                    severityText.call(severityTextEnterTransition);
                });
            });

当我这样做时，bottomBarsEnterTransition似乎在页面上正确执行，但随后动画停止。使用调试器进行检查后发现，d3代码本身内部已抛出异常：

SCRIPT438: Object doesn't support property or method 'call' 
d3.v3.min.js, line 3 character 8323

使用调用堆栈显示第一个.each方法调用启动了违规调用。

现在，我知道我可以通过这种方式编写转换来解决这个问题：

bottomBarsEnterTransition(bottomBars);

但我需要才能使用每种方法，以便我的转换以正确的顺序执行。

我在这里做错了什么，或者这是d3的问题？

更新

错误似乎与“呼叫”完全无关......如果我在自己的线路上调用每个“呼叫”方法，图表呈现正常，尽管不按我需要的顺序。因此，它似乎是导致问题的“每个”调用。

希望有助于提供更多的见解，并提前感谢您的帮助。

d3'呼叫'方法不起作用

0 个答案: