D3- Как нарисовать точки на многолинейном графике? (Итерация по массиву)

Question

У меня есть многострочный график, на котором я хотел бы нарисовать точки (в конце концов, чтобы добавить к нему подсказку). Я просто не могу правильно перебрать данные и нарисовать их все. Мои данные - это массив массивов, каждый из которых является своей собственной линией, на которой я хотел бы нарисовать точки. x (inspected_at), y (flow_data)

Полный код здесь, в строке 388: https://codepen.io/lahesty/pen/aKQjVK?editors=0011

var dots = 
    svg.selectAll('.dots').data(data).enter().append("g").attr("class", 
    "dot");
dots.selectAll('.dot')
    .data(data)
    .enter()
    .append('circle')
    .attr("r", 2.5)
    .attr("cx", function(d) { return x(d.inspected_at); })
    .attr("cy", function(d) { return y(d.flow_data); })
    .style("fill", "blue").style("opacity", ".5") 

Я предполагаю, что это что-то похожее, потому что когда я изменяю второй .data (data) на .data (data [0]), появится первый массив точек, но я бы хотел, чтобы они все. Я тоже попробовал что-то вроде этого вместо вышеперечисленного:

svg.selectAll("g.dot")
    .data(data)
    .enter().append("g")
    .attr("class", "dot")
    .selectAll("circle")
    .data(function(d, i) { return d[i]; })
    .enter().append("circle")
    .attr("r", 6)
    .attr("cx", function(d,i) {  return x(d.inspected_at); })
    .attr("cy", function(d,i) { return y(d.flow_data); })

Я использую v4. Какие-нибудь мысли? Ваша помощь очень ценится!

Answer 1

Я бы также сказал, что вы почти на месте - вот как вы можете двигаться вперед: первый аргумент data() должен быть либо

• объект, который является итеративным (vulgo: array) или
• функция, преобразующаяся в объект для 2-го уровня вложенности, который у вас есть (c также здесь: selection.data ).

Вы можете (и, возможно, должны) дать ключевую функцию.

Итак, внешний вызов data() становится

var dots = svg.selectAll('.dots').data(data, function(d, i) { return d[0]; }).enter() // and so on

внутренний вызов опирается на каждый ряд внешнего (т. Е. data[0], data[1], и т.д.) и выбирает коллекцию для внутреннего пользования. Удобно, это то, что вы получаете, но если вы не используете функцию, вы никогда не сможете сказать D3, что делать. Итак, следующее немного сумасшедшее:

dots.selectAll('.dot')
    .data(function(d) { return d; }, function(d_, i_) { return i_})
    .enter() // and so on

но вам нужна функция, возвращающая свой собственный параметр (и генератор ключей для хорошей меры). Я раскошелил вашу ручку - c здесь: https://codepen.io/sebredhh/pen/VdVOxQ?editors=0010 и изменил строки 389 и 391. Похоже, что вы искали - надеюсь, вы найдете это полезным ...

Answer 2

Вы почти закончили. После того, как вы ввели g.dot, вы должны сохранить ту же привязку, чтобы распространить данные на круги. Это можно сделать с помощью функции идентификации: function(d) { return d; } или Object.

Внутренняя итерация будет неявно выполняться в Selection.

svg.selectAll("g.dot")
   .data(data)
   .enter().append("g")
     .attr("class", "dot")
   .selectAll("circle")
   .data(Object) // <--- identity function here
   .enter().append("circle")
     .attr("r", 6)
     .attr("cx", function(d,i) {  return x(d.inspected_at); })
     .attr("cy", function(d,i) { return y(d.flow_data); })