D3：用一组中的多个元素更新数据 [英] D3: update data with multiple elements in a group

问题描述

我有一个组合的条形/折线图。对于输入文件中的每一行，我创建一个包含多个元素（行，矩形，文本）的组：

  var myGroups = svg.selectAll（'g'）。data（myData）
 myGroups.enter（）。append（'g'）
 ... 
 myGroups.append（'line'）
 ... 
 myGroups.append（'polygon'）
 ... 
 myGroups.append（'text'）
 ... 
  
 
 
 
我目前只是
  svg.selectAll（'*'）。remove（）
  
更新。但是，我想为所有元素实现平滑过渡。
 
 
 
我经历过本教程几次，但我仍然不明白我如何能在我的情况下做。
解决方案
关键是处理所有的选择，而不只是输入选择：
  var myGroups = svg.selectAll（'g'）。data（myData）; 
 
 //输入选择
 var myGroupsEnter = myGroups.enter（）。append（g）; 
 myGroupsEnter.append（line）; 
 myGroupsEnter.append（polygon）; 
 // ... 
 
 //更新选择 - 这也将包含新附加的元素
 myGroups.select（line）。attr（...） ; 
 // ... 
 
 //退出选择
 myGroups.exit（）。remove（）; 
  
这里有两件事需要进一步解释。首先，添加了新元素的输入选择中的元素合并到更新选择中。也就是说，如果在更新选择中发生相同的事情，则不需要在输入选择中的元素上设置属性。 
 
 
 
第二件事对于使用更新数据的后续调用很重要。由于绑定数据的元素不是实际绘制的元素，因此需要将新数据传播给它们。这是 .select（）的作用。也就是说，通过 myGroups.select（line），传播绑定到 g 元素到它们的子行元素。因此，设置属性的代码与输入框相同。
 
 
 
现在，您可以在设置新属性之前，根据需要添加转换。
 
I have a combined bar / line chart. For each row in the input file, I create a group that contains multiple elements (lines, rectangles, texts):
var myGroups = svg.selectAll('g').data(myData)
myGroups.enter().append('g')
...
myGroups.append('line')
...
myGroups.append('polygon')
...
myGroups.append('text')
...
I currently just
svg.selectAll('*').remove()
and create everything from scratch every time the data are updated. However, I'd like to have a smooth transition for all elements.

I've gone through this tutorial several times, but I still don't understand how I can do it in my case.
解决方案
The key is to handle all the selections, not just the enter selection:
var myGroups = svg.selectAll('g').data(myData);

// enter selection
var myGroupsEnter = myGroups.enter().append("g");
myGroupsEnter.append("line");
myGroupsEnter.append("polygon");
// ...

// update selection -- this will also contain the newly appended elements
myGroups.select("line").attr(...);
// ...

// exit selection
myGroups.exit().remove();
There are two things here that warrant further explanation. First, elements in the enter selection that have had new elements appended merge into the update selection. That is, there is no need to set attributes on the elements in the enter selection if the same thing happens in the update selection. This allows you to append new elements and update existing ones without duplicating code.

The second thing becomes important on subsequent calls with updated data. As the elements you're binding the data to are not the ones that are actually drawn, the new data needs to be propagated to them. This is what .select() does. That is, by doing myGroups.select("line"), you're propagating the new data bound to the g elements to their children line elements. So the code to set attributes is the same as for the enter case.

Now you can simply add transitions where desired before setting the new attributes.

                        
这篇关于D3：用一组中的多个元素更新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！