我是使用 d3 和 JavaScript 的新手，希望能得到一些建设性的反馈。我正在模拟一个练习示例来学习 d3，该示例涉及从两个来源（GISS 和 HAD）绘制 1880-2010 年的气候数据（温度异常）。到目前为止，我已经使用这些数据在 d3 中生成了一个多折线图。代码和数据在这里https://gist.github.com/natemiller/0c3659e0e6a0b77dabb0
在此示例中，数据最初绘制为灰色，但每条线在鼠标悬停时都涂上了不同的颜色。
我想添加两个附加功能。
我想在鼠标悬停时重新排列线条，使鼠标悬停的线条位于顶部，本质上是重新排列线条。我已经读到这需要重新绘制 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"... 代码用于突出显示当前的“鼠标悬停”行。在我的示例中似乎不起作用。所有行最初都突出显示，然后随着鼠标悬停/变为灰色/ mouseout. 如果有人可以帮助我确定如何更新我的代码，以便我可以重新排序 mouseover 上的行，那就太好了！
我一直在尝试标记线条，这样当线条或其标签被鼠标悬停在线条上时，标签颜色就会更新。我已经使用 id 进行了一些操作，但到目前为止，我无法同时获得文本和线条来改变颜色。我已经设法 1. 将鼠标悬停在线条上并更改文本的颜色，2. 将鼠标悬停在文本上并更改线条的颜色，2. 将鼠标悬停在线条上并更改线条，但不能同时拥有线条和文本当它们中的任何一个被鼠标悬停时改变颜色。这是一段作为开始的代码（使用 ids），但并不完全有效，因为它只指定了路径，而不是文本和路径。我已经尝试将它们都添加到 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 和这个帮助服务的新手。目前这是一个陡峭的学习曲线，但我希望这个示例和代码相当清晰。如果它不让我知道如何使它变得更好，我可以重新发布问题。
非常感谢，
内特