D3.js 如何将多系列折线图转换为新数据集

我真的需要一些指导，在我的多系列折线图上设置一个过渡。作为我需要的一个例子，我从这个伟大的多系列折线图开始：。在该代码中，我添加了一个update函数，该函数使用setInterval调用一次。我还创建了一个名为data2.csv的新数据集，它类似于data.tsv，但具有不同的值

更新功能应更改折线图显示的数据。忘了做一个平滑的过渡吧，我甚至不能在图表视图中更新数据。当我尝试使用update函数时，看起来新数据已正确加载到javascript变量中，但图表上的线条一点也没有改变

这个问题我已经问过好几次了，但还没有找到答案。有谁能帮我弄清楚如何将这个多系列折线图转换到一个新的数据集或多系列

function update() {

    d3.csv("data2.csv", function(error, data) {

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

        // format the date
   data.forEach(function(d) {
        d.date = parseDate(d.date);
  });

    // rearrange the data, same as in the original example code
var cities2 = color.domain().map(function(name) {
        return {
          name: name,
          values: data.map(function(d) {
            return {date: d.date, temperature: +d[name]};
          })
        };
      });

    // update the .city g's to the new dataset
 var city2 = svg.selectAll(".city")
      .data(cities2);

    // redraw the lines with the new data??? 
  city2.selectAll("path")
      .attr("d", function(d) { return line(d.values); });

 clearInterval(transitionInterval);
});
}

---

更新：NikhilS的答案在评论线索中包含了解决方案的关键

你应该确保按照迈克·博斯托克（Mike Bostock）在其网站上的文章中概述的enter+更新过程进行操作。看起来您还没有调用任何类型的d3转换。您还没有为更新函数指定输入或输出，如果有新数据输入和/或旧数据输出，这将导致问题。尝试更改此选项：

 var city2 = svg.selectAll(".city")
  .data(cities2);

 city2.selectAll("path")
  .attr("d", function(d) { return line(d.values); });

对下列事项：

 var city2 = svg.selectAll('.city')
   .data(cities2);

 var cityGroups = city2.enter().append('g')
   .attr('class', 'city');

 cityGroups.append('path')
  .attr('class', 'line');

 d3.transition().selectAll('.line')
  .attr('d', function(d) { return line(d.values); });

 city2.exit().remove();

---

不久前，我制作了一个基本数据重新加入和更新演示，您可以使用它。

使用d3转换，您可以制作某种动画

如果要选择数据的子间隔来绘制图形，则无需对数据进行操作，只需使用d3笔刷并剪裁图形即可

---

对于包含大多数线形图元素的多系列线形图，您可以参考以下示例：

Hi NikhilS，感谢您的建议和教程。我没有包括完整的enter+更新，因为我知道新数据集的条目数与原始数据集的条目数相同，所以输入和退出选项将为空。在任何情况下，我已经添加了您对良好实践的建议，并查看了您的教程。但是，屏幕上的数据并没有改变。当我逐步阅读代码时，cities2看起来不错，city2选择的数据也会更新，但路径的d属性在DOM中不会更新。检查控制台，看起来路径的数据仍然是原始数据，而“g”的数据是新数据。是否应该有类似这样的额外调用：“d3.transition.selectAllpath.datacities2”？好的。尝试重写update函数，使其接受dataset作为参数，就像我发布的小示例中那样。使用传入的第一个数据集运行一次，然后使用第二个数据集运行一次。从干燥的角度来看，这也更好。如果这不起作用，请尝试在JSFIDLE或支流上发布，我可以仔细查看。再次感谢您坚持我的观点。我重写了update以接受dataset作为参数，并仅将其用于第二个dataset。我不太确定这对第一个数据集是否有意义-有很多图形设置不需要对第二个数据集重复，最终我将在多个数据集之间进行多次转换，这样设置代码将运行一次，更新代码将运行多次。我是个小提琴新手，如果不行就告诉我。我添加了一个标题，以便您可以看到正在调用更新代码，并创建了本地数据集。尽管如此，这些线在转换时并没有改变。