Javascript 在包装的元素中呈现更新的数据

我是d3新手，很难理解数据绑定。下面是一个包含以下代码的示例

假设我有一些数据将在以后更新。请注意，

6

变为

1

data1 = [
    { key: 'orig7', val: 7 },
    { key: 'orig3', val: 3 },
    { key: 'orig6', val: 6 }
];
data2 = [
    { key: 'orig7', val: 7 },
    { key: 'orig3', val: 3 },
    { key: 'orig6', val: 1 },
    { key: 'new5', val: 5 }
];

然后我渲染它们。我的代码要求将数据更深地嵌入元素中。这里有两个渲染函数；它们的区别只是第一个简单，没有这样的包装，第二个在文本周围创建一个内部div

function render1(data) {
    var result = d3.select('#list1').selectAll('.item')
        .data(data, function(d, i) { return d.key });
    result.enter()
        .append('div')
            .classed('item', true)                       // set up a div
    result                                               // set text in the div
        .text(function(d, i) { return '' + d.key + "=" + d.val; });
    result.exit().remove();
    result.sort(function(a, b) { return a.val < b.val ? -1 : 1 });
}

function render2(data) {
    var result = d3.select('#list2').selectAll('.item')
        .data(data, function(d, i) { return d.key });
    result.enter()
        .append('div')
            .classed('item', true)
        .append('div')                                   // set up an *inner* div
    result.selectAll('div')                              // set text in the inner div
        .text(function(d, i) { return '' + d.key + "=" + d.val; });
    result.exit().remove();
    result.sort(function(a, b) { return a.val < b.val ? -1 : 1 });
}

结果如下：

orig6=1
orig3=3
new5=5
orig7=7

orig6=6
orig3=3
new5=5
orig7=7

排序工作正常，因为它对存储在

.item

中的数据进行操作

然而，文本中存在差异。如果我插入一个内部div，它将从父级继承数据，但该数据将不会更新，并保持

6

（而我希望它反映更新后的值

1

，如第一个渲染示例中所示）

内部div究竟在哪里获得数据的副本，当新数据绑定时，如何强制更新它

编辑：标题与问题无关；道歉。

使用以下方法解决：

result.each(function(d, i) {
  d3.select(this).select('div').datum(d);
});

---

但必须有更好的方式让我看不见。不是吗？

解决这个问题的方法实际上非常简单。你所要做的就是改变

result.selectAll('div')

到

完成演示。如果使用

.select（）

，则绑定到当前选择（新选择的“基础”）的数据也会绑定到新选择的元素。如果使用

.selectAll（）

，则情况并非如此。这正是你所看到的

---

在这里使用

.select（）

似乎违反直觉，因为您正在选择多个元素。但是，请记住，原始选择已经包含多个元素，并且将为每个元素执行选择器。也就是说，对于当前选择中的每个元素，使用

.select（）

（这是您在本例中所需要的）选择一个元素，使用

.selectAll（）

（这对于树状层次结构很有意义）。

哦，在您的解决方案中，

.datum（d）

实际上是多余的--

.select（）

已经处理好了。哦。令人尴尬的简单：）所以-只是为了检查我的理解-

selectAll

将节点升级为组，更改根，不复制数据<代码>选择不更改组或根，但将数据复制到新节点？没有任何组。进行选择（无论是使用

.select（）

还是

.selectAll（）

）始终会更改根（这就是进行选择的要点）

.selectAll（）

不复制数据，

.select（）

复制数据。

result.selectAll('div')

result.select('div')