javascript - 为什么 d3 在第二次更新期间删除数据

Question

我使用完全相同的模型更新我的数据(使用 d3)两次。

在第一次更新期间，我可以看到 data().enter() 包含一些元素，而 data().exit() 是空的。这对我来说是可以理解的。

在第二次更新期间(使用相同的模型)data().enter() 为空(如我所想)，但 data().exit() 不为空，因此它在第二次更新期间删除了所有节点.这是我不明白的。

这是简化的代码(和 jsfiddle；查看控制台):

// http://jsfiddle.net/24yqteo0/
// http://jsfiddle.net/6du29258/ - example with displaying some data

var model = {
    smth: 'test',
    rows: [
        {
            label: 'label1',
            series: [
                {
                    test: 'test1_1'
                },
                {
                    test: 'test1_2'
                }
            ]
        },
        {
            label: 'label2',
            series: [
                {
                    test: 'test2'
                }
            ]
        }
    ]
};

var svg = d3.select("body").append("svg");
updateData(model);
console.log('// ------------- new update');
updateData(model);

function updateData(model) {
    var selection = svg.selectAll('g').data(model.rows);
    console.log('selection enter size: ' + selection.enter().size());

    var rows = selection.enter().append('g');

    var rowData = rows.append('g').selectAll('g')
    .data(function (d) {
        return d.series;
    });

    console.log('rowdata enter size: ' + rowData.enter().size());
    var seriesGroup = rowData.enter().append('g');

    console.log('rowdata exit size: ' + rowData.exit().size());
    rowData.exit().remove();

    console.log('selection exit size: ' + selection.exit().size());
    selection.exit().remove();
}

Answer 1

嗯，当你只使用普通的 g 元素来嵌套进入和退出时，这对调试没有帮助。

我用 text 替换了 seriesGroup 追加，如下所示 fiddle here :

var seriesGroup = rowData.enter()
    .append('text')
    .text(function (d) { return d.test; });

我很快就发现了您代码中的问题。它实际上是updateData

的第一行

var selection = svg.selectAll('g').data(model.rows);

此选择包括 ALL g 元素，包括嵌套元素。 (console.log选择确认)为防止这种行为，您可以添加更精确的选择器，例如 class

var selection = svg.selectAll('g.row').data(model.rows);

然后追加

var rows = selection.enter()
    .append('g')
    .classed('row', true);

与第二层类似:

var rowData = rows.append('g').selectAll('g.series')

然后

var seriesGroup = rowData.enter()
    .append('g')
    .classed('series', true);

Updated fiddle here .

希望这对您有所帮助。