D3.js嵌套数据-如何显示我的圆圈

我是D3.js的初学者，在以下方面遇到了困难：

我希望显示一段时间内活动参与者给出的分数。然后，由于与会者也可以发表意见，我想在评分曲线上画一个与评分颜色相同的圆圈。 我成功地为一个用户做到了这一点

代码在jsfiddle上

然后，试图将此扩展到多个与会者，我遇到了问题

三叉戟

此代码很好地显示了模拟的3名与会者的分数数据。但是，用于显示可能的评论的圆圈在与会者的数据集中只有一个不起作用 我尝试筛选与会者数组 svg.selectAllcircle

 .data(data.filter(function(d, i){ if(d.comment){return d}; })) // condition here
 .enter().append("circle")
 .attr("class", "dotLarge")
 .attr({r: 5})
 .attr("cx", function(d) { return x(d.time); })
 .attr("cy", function(d) { return y(d.status); }) 

我想我需要更深入地研究鸟巢，但是……我的无知。 非常感谢

---

Peter

显示圆圈的代码甚至与数据格式不匹配。我不知道你对nest有什么问题，但在绘制评论时，你可能需要稍微不同的数据结构

我在这里更新了你的小提琴：

重要的一点是：

var comments = attendees.map(function(d) {
     return {
         name: d.name,
         comments: d.values.filter(function(e) {
             return e.comment != undefined;
         })
     };
 });

 //generation of the circles to indicate a comment
 // needs to be done with a filter
 svg.selectAll("g.comments")
     .data(comments)
   .enter()
     .append("g")
     .attr("class", function(d) { return "comments " + d.name })
     .selectAll("circle.comment")
       .data(function(d) {
           return d.comments;
       })
     .enter()
       .append("circle")
       .attr("class", "dotLarge comment")
       .attr("r", 5)
       .attr("cx", function(e) { return x(e.time); })
       .attr("cy", function(e) { return y(e.status); });

这段代码的第一部分创建了一个新的数据结构，它更加关注注释信息。第二部分创建圆

注意：我将每个人分组到他们自己的g元素中，然后为他们的每个评论创建一个圆圈。这利用了d3嵌套选择和数据绑定。希望你能关注正在发生的事情

---

我还为您的数据添加了一些注释以供测试。我没有费心去解决任何表面问题，我会让你来解决。

那么你到底在寻找什么呢？嘿，Lars，我希望将第一个JSFIDLE示例中的行为扩展到多个数据集。第二个JSFIDLE显示了多行，但是每当注释键/值对出现在数据集中时，我就没有在上面画圆圈。第二个FIDLE看起来与第一个完全不同-缺少轴等。这是故意的吗？是的，我开始只是为了了解如何用我的特殊圆圈为评论画多行。你能给我一个突破性的提示让我进步吗，我真的被困在这里了。谢谢，谢谢。我假设在新的数据结构中，您将数据作为e传递到函数中。剩下的问题是：如何强制为行选择颜色，也为注释选择颜色？无论如何，非常感谢您的帮助。我也可以解决颜色问题。我确实将line.stylestroke、function{return colord.name；}添加到g组，它完成了工作。现在一切都准备好了。