Question

我设法破解了d3转换，请在此处查看。

https://jsfiddle.net/guanzo/k1xw6ace/14/

以下是基本想法：

如果svg高度不够，我需要处理2列的可能性。

所有过渡都是淡入/淡出，并且在x轴上平移+/- 30px;

在initialLoad上，所有图例都会转换为视图。

点击＆＃34;重新定位＆＃34;按钮和数据退出，退出的图例会立即过渡，在最后一个图例退出后，其余的图例将转换到新的位置。

当您再次单击该按钮并输入数据时，更新的图例将立即转换到新位置（考虑输入图例），在上次更新转换后，输入的图例将转换。

我的问题是我的代码依赖于setTimeouts和几个hack来处理笨拙的选择和冲突的输入/更新状态。

例如当数据输入时我需要selectAll update和enter传奇，以确定他们的新位置。但是我需要为两个组设置不同的过渡。

转换顺序取决于数据是进入还是退出。如果正在输入数据，则update选择首先转换，然后转移enter选择。如果数据退出，则exit选择首先转换，然后转换update。我如何优雅地编码这种反向关系？

我对最好的方法感到困惑。

Answer 1

在第一次转换完成后，我学会了链接转换的技巧：

function endall(transition, callback) {
    if (transition.size() === 0) {
        callback()
    }
    var n = 0;
    transition
        .each(function() {
            ++n;
        })
        .each("end", function() {
            if (!--n) callback.apply(this, arguments);
        });
}

然后在你的过渡功能中：

selection.transition()
    .attr("cx", xMap)
    .attr("cy", yMap)
    .call(endall, function() { 
        console.log("all loaded");
        // do your next transition
    });

如何让我的D3代码更清晰

1 个答案: