D3.js вложенные данные - как я могу показать мои круги

Question

Я новичок на D3.js и врезался в стену на следующее:

Я хочу, чтобы отобразить счет заданного с помощью участника какого-либо события во времени , Затем, когда участник может дать также комментарии, я хотел бы разместить круг на кривой оценки в том же цвете, что и оценка. Мне удалось сделать это для одного пользователя.

код на JS Fiddle http://jsfiddle.net/roestigraben/8s1t8hb3/

Затем, пытаясь распространить это на нескольких участников, я бегу в проблемы.

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

Этот код отображает красиво данные Партитура для 3 участников моделируются. Однако круги, чтобы отобразить возможные комментарии (есть только один в наборе данных) от посетителей не работает я стараюсь фильтровать посетитель массива svg.selectAll («круг»)

.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 вложенные выборки и привязку данных. Надеюсь, вы сможете следить за тем, что происходит.

Я также добавил еще несколько комментариев к вашим данным для тестирования. Я не потрудился исправить какие-либо косметические проблемы, я оставлю это до вас.