D3：用附加（'g'）更新组选择中的数据 [英] D3: update data in group selection with additional ('g')

问题描述

对于我的图表，我必须创建包含多个元素（line，rect，text）的组。我在这个问题中做了我的设置： D3：更新数据组中的多个元素

For my chart I had to create groups which contain several elements (line, rect, text). I did my setup like in this question: D3: update data with multiple elements in a group

我将我的组定义如下：

var group = groupContainer.selectAll('g')
    .data(items);
var groupEnter = group.enter()
    .append('g');

对于每个组元素，我添加了一个rect并进行了更新（稍后刷新事件）。 / p>

For each group element I appended a rect and did the update (later for my brushing event).

// append
groupEnter.append('rect')
    .attr('class', 'item')
    .style('fill', function (d) { return d.color; })
    .attr('x', function (d) { return x1(d.x); })
    .attr('y', function (d) { return y1(d.y); })
    .attr('width', '50')
    .attr('height', '50');

//update
group.select('rect')
    .attr('x', function (d) { return x1(d.x); })
    .attr('y', function (d) { return y1(d.y); });

这个有效！现在，当我想在我的组和rect之间放置另一个组元素时，更新将不再起作用。

This works! Now when I want to put another group element between my group and the rect, the update won't work anymore.

// append
groupEnter.append('g').append('rect') // here is the change
    .attr('class', 'item')
    .style('fill', function (d) { return d.color; })
    .attr('x', function (d) { return x1(d.x); })
    .attr('y', function (d) { return y1(d.y); })
    .attr('width', '50')
    .attr('height', '50');

//update
group.select('rect')
    .attr('x', function (d) { return x1(d.x); })
    .attr('y', function (d) { return y1(d.y); });

选择 group.select（'rect'）和以前一样。我做错了什么？

The selection group.select('rect') is the same as before. What am I doing wrong?

编辑：我进一步调查了我的问题。似乎更新方法具有错误的数据映射。没有group元素（工作示例），我得到

I investigated my problem furthermore. It seems like the update method has the wrong data mapping. Without the group element (the working example), I get for

group.select('rect')
    .attr('x', function (d) { console.log(d); return x1(d.x); })
    .attr('y', function (d) { return y1(d.y); });

输出：

第1项
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
项目10

item 1 item 2 item 3 item 4 item 5 item 6 item 7 item 8 item 9 item 10

对于具有group元素的版本，我只得到输出：

For the version with the group element I just get the output:

item 2
item 2
item 4
item 4
item 6
item 6
item 8
item 8
item 10
第10项

item 2 item 2 item 4 item 4 item 6 item 6 item 8 item 8 item 10 item 10

也会绘制一些rects，但不是全部。我猜只有2,4,6,8,10。映射有什么问题？我是否必须重新映射我的数据？

Some rects get drawn as well, but not all. I guess only 2, 4, 6, 8, 10. Whats wrong with the mapping? Do I have to re-map my data?

推荐答案

我通过添加可选的data（）参数来管理它以匹配元素。

I did manage it by adding the optional data() parameter to match the elements.

var group = groupContainer.selectAll('g')
    .data(items, function (d) { return d.id; });

有人可以评论为什么我需要这个可选参数进行匹配，当我使用额外的追加（'g '）？

Can someone comment why I would need this optional parameter for matching when I use an additional append('g')?

这篇关于D3：用附加（'g'）更新组选择中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！