Question

我有分层数据，我使用D3显示为嵌套列表。顶级是固定的，但子级别是一个更改的计数器列表。不仅计数值，而且计数器的数量随时间变化。我从这样的数据开始：

var data = [
    {
        'id': 'id_1',
        'counts': d3.map()
    },
    {
        'id': 'id_2',
        'counts': d3.map()
    }
];

最初这应该只显示为

＆＃13;

<ul>
  <li>id_1</li>
  <li>id_2</li>
</ul>

＆＃13;

现在时光飞逝，我得到一些计数值，我用这个函数模拟：

var time_flies = function() {
    data[0].counts.set('counter_1', 1);
    data[1].counts.set('counter_2', 5);
    data[1].counts.set('counter_3', 8);
}

我尝试使用D3使用以下代码渲染：

var main = d3.select（＆＃39; body＆＃39;）。追加（＆＃39; ul＆＃39;）;

var render = function() {
    main.selectAll('li')
        .data(data)
        .enter()
            .append('li')
            .html(function(n) { return n.id; })
            .append('ul').selectAll('li')
                .data(function(n) {
                    return n.counts.entries();
                })
                .enter()
                    .append('li')
                    .html(function(n) {
                        return n.key + ': ' + n.value;})
        ;
};

以下工作正常：

time_flies();
render();

但我真正需要它：

render();
time_flies();
render();

显然我设法让一次性静态解决方案正常工作，但每当计数器更新时我都需要更新显示。我知道，我必须将一些代码从enter()部分移到update部分，但我没有设法这样做。棘手的部分可能是第二个<ul>，但我不知道在哪里以及如何创建它，因此可以使用更新的数据更新结构。

Answer 1

调用render +时需要删除旧数据，需要进行更新。

var render = function() {

    var lis = main.selectAll('li')
        .data(data);
        //for removing removed data
        lis.exit().remove()
        //for appending new data if any
        lis.enter()
            .append('li');
        //for update
        main.selectAll('li')
            .html(function(n) { return n.id; })
            .append('ul').selectAll('li')
                .data(function(n) {
                    return n.counts.entries();
                })
                .enter()
                    .append('li')
                    .html(function(n) {
                        return n.key + ': ' + n.value;})
        ;
};

使用D3更新分层数据的显示

1 个答案: