Question

我是D3.js的初学者，并在以下内容中突然出现：

我希望显示一位与会者在一段时间内给出的分数。然后，当与会者也可以给出评论时，我想在得分的曲线上放一个圆圈，其颜色与得分相同。我成功地为一个用户做了这个。

代码在JS Fiddle http://jsfiddle.net/roestigraben/8s1t8hb3/

上

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

JSFiddle http://jsfiddle.net/roestigraben/Lk2kf1gh/

此代码很好地显示了模拟的3位与会者的分数数据。但是，与会者显示可能的评论（数据集中只有一个）的圆圈不起作用我尝试过滤与会者数组 svg.selectAll（＆＃34; circle＆＃34;）

 .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); })

我想我需要更深入地进行筑巢，但......我的无知。非常感谢

彼得

Answer 1

您显示圈子的代码甚至无法与您的数据格式相匹配。我不知道您遇到了嵌套问题，但在制作评论时，您可能需要稍微不同的数据结构。

我在这里更新了你的小提琴：http://jsfiddle.net/Lk2kf1gh/7/

重要的一点是：

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嵌套选择和数据绑定。希望你能跟踪发生的事情。

我还为您的数据添加了一些评论以供测试。我没有办法解决任何化妆品问题，我会把它留给你。

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

1 个答案: