d3.js - 更新嵌套数据

Question

我正在尝试弄清楚如何在嵌套深度超过 2 层的 D3 应用程序中更新嵌套数据。让我们从我的代码开始吧。

这是页面准备就绪时的 jQuery 处理程序。

$(function () {
    var data = createDataSet();
    updateD3(data);

    setTimeout(function () {
        var dataAgain = createDataSet();
        updateD3(dataAgain);
    }, 5000);
});

这是更新函数。

function updateD3(data) {
    var level1 = d3
        .select('body')
        .selectAll('div.level-1')
        .data(data);

    // UPDATE existing data.
    level1
        .text(function (d) { return d.nameLevelOne + '-'; })
        .selectAll('div.level-2')
        .data(function (d) { return d.valuesLevelOne; })
        .text(function (d) { return d.nameLevelTwo + '-'; })
        .selectAll('div.level-3')
        .data(function (d) { return d.valuesLevelTwo; })
        .text(function (d) { return d.nameLevelThree + ' ' + d.count + '-'; });

    // CREATE new data.
    level1
    .enter()
        .append('div')
        .attr('class', 'level-1')
        .text(function (d) { return d.nameLevelOne; })
        .selectAll('div')
        .data(function (d) { return d.valuesLevelOne; })
    .enter()
        .append('div')
        .attr('class', 'level-2')
        .text(function (d) { return d.nameLevelTwo; })
        .selectAll('div')
        .data(function (d) { return d.valuesLevelTwo; })
    .enter()
        .append('div')
        .attr('class', 'level-3')
        .text(function (d) { return d.nameLevelThree + ' ' + d.count; });

    // REMOVE deleted data.
    level1
    .exit()
        .selectAll('div')
        .transition()
        .style('opacity', 0)
        .remove();
}

这里是数据创建函数，它也记录了数据的结构。

function createDataSet() {
        return [
        {
            nameLevelOne: 'A',
            valuesLevelOne: [{
                nameLevelTwo: 'AA',
                valuesLevelTwo: [
                    {
                        nameLevelThree: 'AAA',
                        count: Math.random() * 100
                    }
                ]
            }]
        },
        {
            nameLevelOne: 'B',
            valuesLevelOne: [{
                nameLevelTwo: 'BB',
                valuesLevelTwo: [
                    {
                        nameLevelThree: 'BBB',
                        count: Math.random() * 100
                    }
                ]
            }]
        }
    ];
}

当我在浏览器中运行这段代码时，第一个 updateD3() 调用是完美的。它显示了这个:

A
AA
AAA 24.26636815071106
B
BB
BBB 37.17236865777522

当 5 秒过去并创建一个新数据集并将其传递给对 updateD3() 的另一个调用时，输出更改为:

A-
B-

这不是我预期的输出。我没想到 DOM 的任何部分都会被破坏。本质上，我希望 AAA 和 BBB 的数字更新为新值。

为什么会这样？如何仅使用更新后的数据更新 DOM？

我在 Internet 上四处寻找解决方案，但几乎每个“嵌套”数据示例实际上只有 2 层深，或者如果数据超过 2 层深，则该示例没有演示更新数据的代码。

非常感谢任何帮助，尤其是在我为此用头撞墙大约 6 小时之后。

Answer 1

您需要在每个级别进行一次选择，而不是多次，即类似于

var level1 = selection.data(...);
level1.enter()...
level1.exit()...
level1....

var level2 = level1.selectAll(...).data(...);
level2.enter()...
level2.exit()...
level2...

var level3 = level2.selectAll(...).data(...);
// etc

当您多次进行选择和绑定(bind)数据时，选择会相互影响，并且您会在选择中得到错误的元素。