Javascript 在数据（）之后引用d3中的父id

大家好，在这个模块中，我尝试创建许多组，并在这些组中为存储在

Data.transcripts.responses

中的字符串中的每个单词创建一个大矩形。在上面截图中，您可以看到

data（）

从父数组返回一个单词数组，然后我们

enter（）

为每个单词创建矩形。对于我创建的每个矩形，我试图引用

.attr（'id'，function（d，I）{return“tl word-”+I；}）

行中的父级id。因此，我希望使用类似于

“tl-word-”+i

，而不是

“tl-”+parent\u id+“-word-”+i

，其中

parent\u id

指的是父元素的索引

这有意义吗

---

看起来应该很简单。

更新：根据Lars的评论，可以使用d3.select（this.parentNode）.attr（'ID'）读取父对象的ID

您不能在

d3

中的访问器函数中直接访问父元素的

数据

解决这个问题的方法是在子项的
数据中引入一个包含
父项id
的字段。对于您的数据结构，它将涉及如下内容：

Data.transactions.responses.forEach（函数（childArray，parent\u idx）{
forEach（函数（d）{d.parent_id=parent_idx；}）；
});

然后在设置子项的
id
时使用它：
.attr（'id'，function（d，i）{return'tl-'+d.parent\u id+'-word-+i；}）
您也可以执行
d3.选择（this.parentNode）.attr（“id”）
。我并不认为访问父节点本身有任何问题，尽管这可能表明您的数据模型应该修改。@Larskothoff确实，我忽略了这一点。我的头发里还有jQuery绒线。：）我已经更新了答案以包含您的解决方案。在这种情况下，我想我需要确保我在家长中的id只是
I
，而不是
“tl-”+I
？@Genu您不能将
I
作为
id
，这是不允许的。使用@LarsKotthoff的方法，您仍然需要先提取
索引
，然后才能使用它。
var mini_timelines = this.e.append('g').attr('class', 'mini_timelines');

mini_timelines.selectAll('g')
    .data(Data.transcripts.responses)
    .enter()
    .append('g')j.attr('class', 'timeline')
    .attr('id', function(d, i){ return "tl-" + i})
    .selectAll('rect')
    .data(function(d, i){
        return d.filteredText.split(' ');
    })
    .enter()
    .append('rect').attr('class', 'timeline-word')
    .attr('id', function(d, i){ return "tl-word-" + i;})
    .text(function(d, i){ return 'hello'});