3

我正在使用 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);

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

我在这里做错了什么，还是d3有问题？

更新：

该错误似乎根本与“调用”无关……如果我在自己的行上调用每个“调用”方法，则图形呈现良好，尽管不是按照我需要的顺序。因此，似乎是导致问题的“每个”调用。

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

4

0 回答 0