d3 Обновление многострочного графика

Question

У меня есть многострочный график, который отображает 10 серий данных, я пытаюсь получить строки для обновления новыми данными, но по какой-то причине я не могу этого добиться. Переход с новыми данными работает для точек на линиях, поэтому я предполагаю, что не выбираю правильные элементы, но для жизни меня не могу понять, где моя ошибка. В какой-то момент у меня было одно изменение строки, которое указывало, что оно обновляется только из первого индекса массива данных. Любое понимание будет оценено:

первой серии creation- функция

var series = svg.selectAll(".series") 
     .data(seriesData) 
     .enter().append("g") 
     .attr("class", "series"); 

series.append("path") 
     .attr("id", function (d) { 
      return d.name; 
     }) 
     .attr("stay", "false") 
     .attr("class", "line") 

     .attr("d", function (d) { 
      d.line = this; 
      return line(d.values); 
     }) 
     .attr("opacity", ".2") 
     .on("click", function() { 
      fadeOuts(this); 
     }) 
     .style("stroke", function (d) { 
      return strokeCol; 
     }) 
     .style("stroke-width", "4px") 
     .style("fill", "none"); 

Update: Это где я застрял, точки реагировать на новые данные, но пути нет.

series.data(newseriesData); 
    series.selectAll("path") 
      .attr("id", function (d) { 
       return d.name; 
      }) 
      .attr("d", function (d) { 
       d.line = this; 
       return line(d.values); 
      }) 
      .attr("opacity", ".2") 
      .on("click", function() { 
       fadeOuts(this); 
      }) 
      .style("stroke", function (d) { 
       return strokeCol; 
      }) 
      .style("stroke-width", "4px") 
      .style("fill", "none"); 
    series.selectAll(".point") 
      .data(function (d) { 
       return d.values; 
      }) 
      .transition() 
      .attr("cx", function (d) { 
       return x(d.label) + x.rangeBand()/2; 
      }) 
      .attr("cy", function (d) { 
       return y(d.value); 
      }) 
      .style("fill", function (d) { 
       return color(d.name); 
      }) 
      .style("stroke", "grey") 
      .style("stroke-width", "2px") 
      .on("mouseover", function (d) { 
       showPopover.call(this, d); 
      }) 
      .on("mouseout", function (d) { 
       removePopovers(); 
      }) 

Да это университетский проект, это последняя часть работы в твердой 50+ часов усилий это, и я бы хотел, чтобы получить его нокаутировал.

Answer 1

Короткий ответ: вместо series.selectAll("path") вы должны использовать series.select("path"). Помните, что series уже выделен, а подсегмент сделан для каждого элемента в нем. Вы добавили ровно один элемент к каждому из вариантов, поэтому .select() в порядке и не требуется .selectAll().

Основное различие это делает, что .select() наследует данные от выбора родительского, в то время как .selectAll() не делает - при выполнении .selectAll() данные просто не обновляется и, следовательно, никаких изменений не происходит.