Graph 多个svg元素上的D3转换

我是D3新手，正在努力学习一些基础知识。我一直在使用D3的技巧和窍门书，并试图调整一个折线图，以得到它的两条线，这两个过渡。基本思想是A行从数据A开始，B行从数据B开始。然后单击按钮，A行转换为数据C，B行转换为数据D

线图是一个随时间变化的图，所以我将x轴设置为时间轴

下面是我正在使用的代码（减少一点）

---

问题是其他转换最终应用于第一行，而第二行是静态的，我做错了什么

问题是您正在调用

svg。在单击处理程序中选择（“路径”）

。这将选择SVG中的第一条路径——也就是说，两次都会选择和更改同一条路径（您首先附加的路径）

缓解此问题的方法是在连接到特定路径的单击处理程序中引用

此

，即替换

svg.select("path")

与

一些一般性评论。选择路径的方法是调用

d3。选择（“p2”）

。这几乎肯定不是您想要的——这是选择具有该名称的DOM元素。如果已为相应路径分配了ID，请使用

d3。选择（“#p2”）

，如果已分配了类，请使用

d3。选择（“.p2”）

如果将路径作为数组传递，则在创建路径时也不需要引用

数据

两次。也就是说，而不是

svg.select("path").data(data)                        
   .attr("d", valueline3(data));

你能行

svg.select("path").data([data])                        
   .attr("d", valueline3);

这消除了一些冗余

---

最后，D3方法是使用相同的线生成器，并为不同的线传入不同的数据数组。您不需要使用四个不同的行生成器，只需将原始数据提取到四个不同的数组中并使用它们即可。您也可以只需一个电话就可以完成这项工作。有更多信息。

非常感谢。这是非常有帮助的，无论是要点还是后续的整理要点。助教！哦，等等，我想我把事情弄糊涂了。这对我不起作用，我想我知道为什么。p2 p3等是其他地方的文本位，而不是行本身。所以当我用“this”来指文本时，对吗？而不是排队。所以这不会更新当前的行吗？处理程序中的

this

引用所选的DOM元素。它应该是

d3。选择（这个）

而不是

svg。在答案中选择（这个）

——我的错，我会解决的。嘿，再次感谢。实际上，我用你的其他建议以一种迂回的方式修复了它——我给了这些线一个id，然后引用了id。在d3中有很多种方法可以剥猫皮，看起来……是的，你也可以这样做。在处理函数中执行某些操作的优点是，您可以直接访问

中的DOM元素，这可以使事情变得更简单——不过，任何其他方法都可以。
svg.select("path").data(data)                        
   .attr("d", valueline3(data));

svg.select("path").data([data])                        
   .attr("d", valueline3);