我是 d3 新手,正在努力理解数据绑定(bind)。这是一个fiddle使用下面的代码。
假设我有一些数据稍后会更新。请注意,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 });
}
让我们使用两个渲染函数来渲染数据。
render1(data1);
render1(data2);
render2(data1);
render2(data2);
输出如下:
orig6=1
orig3=3
new5=5
orig7=7
orig6=6
orig3=3
new5=5
orig7=7
排序效果很好,因为它对存储在 .item
中的数据进行操作。
但是,文本上存在差异。如果我插入一个内部 div,它将继承父级的数据,但该数据不会更新,并保持 6
(而我希望它反射(reflect)更新后的值 1
,如第一个渲染示例中所示)。
内部 div 到底在哪里获取数据的副本,以及如何在新数据绑定(bind)时强制更新它?
编辑:标题与问题无关;抱歉。
最佳答案
这个问题的解决方案实际上非常简单。你所要做的就是改变
result.selectAll('div')
至
result.select('div')
完整演示 here 。如果您使用 .select()
,则绑定(bind)到当前选择的数据(新选择的“基础”)也会绑定(bind)到新选择的元素。如果您使用.selectAll()
,则情况并非如此。这正是您所看到的。
当您选择多个元素时,在此处使用 .select()
似乎违反直觉。但是,请记住,原始选择已经包含多个元素,并且选择器会针对每个元素执行。也就是说,对于当前选择中的每个元素,使用 .select()
仅选择一个元素(这正是本例中您所需要的),并使用 .selectAll() 选择多个元素
(这对于树状层次结构来说是有意义的)。
关于javascript - 在包装元素中呈现更新的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24421425/