Javascript 在d3中的鼠标上方更新行顺序（z方向）

我不熟悉使用d3和JavaScript，希望能得到一些建设性的反馈。我正在模拟一个实践示例来学习d3，它涉及从两个来源（GISS和HAD）绘制1880-2010年的气候数据（温度异常）。到目前为止，我已经使用这些数据在d3中生成了一个多折线图。代码和数据在这里

在本例中，数据最初以灰色打印，但每条线在鼠标上方的颜色不同

我想添加两个附加功能

我想，在mouseover上，对行重新排序，使鼠标悬停的行位于顶部，本质上是对行重新排序。我已经读到这本质上需要重新填充SVG，并且我已经尝试了与此类似的代码

source.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", "lightgrey")
.on("mouseover", function() {
  if (active) active.classed("highlight", false);
  active = d3.select(this.parentNode.appendChild(this))
      .classed("highlight", true);
})
      .style("stroke",function(d) {return color(d.name);})
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(750)
.style("stroke", "lightgrey")
})
.attr("id", function(d, i) { return "path-" + d.name; });

其中.on（“mouseover”…代码旨在突出显示当前的“mouseover”行。在我的示例中，它似乎不起作用。所有行最初都突出显示，然后随着mouseover/mouseout变为灰色。如果有人能帮我确定如何更新代码，以便我可以在mouseover上重新排序，那就太好了

我一直在尝试为线条添加标签，这样当线条或其标签被鼠标移到线条上时，标签颜色就会更新。我使用id进行了一些尝试，但到目前为止，我无法使文本和线条都改变颜色。我已设法1.鼠标移过线条并更改文本的颜色，2.鼠标移过文本and更改行的颜色，2.将鼠标悬停在行上并更改行，但不要让行和文本在鼠标悬停时都更改颜色。下面是一段代码，作为开始（使用ID），但不太管用，因为它只指定路径，而不指定文本和路径。我尝试将它们都添加到d3.select（“#path-”、“#text-”…）和其变体中，但似乎不管用

source.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", "lightgrey")
.on("mouseover", function(d){
d3.select(this)
.style("stroke",function(d) {return color(d.name);});
})
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(750)
.style("stroke", "lightgrey")
})
.attr("id", function(d, i) { return "path-" + d.name; });



source.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 15]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 5)
.attr("dy", ".35em")
.style("stroke", "lightgrey")
.on("mouseover", function(d){
d3.select('#path-' + d.name)
.style("stroke",function(d) {return color(d.name);});
 })
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(750)
.style("stroke", "lightgrey")
})
.text(function(d) { return d.name; })
.attr("font-family","sans-serif")
.attr("font-size","11px")

.attr("id", function(d, i) { return "text-" + d.name; });

我非常感谢你的帮助。我是d3新手，这个帮助很有用。目前这是一个陡峭的学习曲线，但我希望这个例子和代码相当清晰。如果它不让我知道如何才能使它更好，我可以重新提出这个问题

非常感谢

---

Nate

Chris Viau在d3 Google group上为这个问题提供了一个很好的答案。

诀窍是选择路径的g父级以与其他路径一起重新排序：

this.parentNode.parentNode.appendChild（this.parentNode）

这会将当前选择的容器“g”附加到所有其他“g”之上

我发现这在很多其他情况下也很有用

---

谢谢Chris！

根据您当前的要点，您似乎已经解决了这些问题。如果是，您可以发布您的答案吗？如果不是，还有什么问题？