Javascript D3：将鼠标悬停在图例上更改线条笔划颜色

我相信这是一个简单的解决办法。但是我找不到。我检查过其他类似的问答，但它们并不完全符合我的问题。 当我将鼠标移到相应的图例上时，我只想突出显示多行图表中的一条线。可能我的错误是没有选择合适的线路。我想我必须使用“路径”，但是。。。我试过用其他的，但不起作用。在此，我附上我的代码图片：

提前谢谢

对不起，伙计们，这是我第一次在stackoverflow中提问。这里我附上代码。基本上是Mike Bostock的例子：

---

正如Hugues提到的，您需要更改您的选择。如果只需要一行，则需要通过为路径（或g）提供id或其他顺序选择来选择该特定行

例如：

对于您的情况，可以尝试：

var country = svg.selectAll(".country")
          .data(countries)
        .enter().append("g")
          .attr("class", "country")
          .attr('id', function(d) { return d.name.replace(' ',''); });

     country.append("text")
          .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
          .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.outcome) + ")"; })
          .attr("x", 3)
          .attr("dy", ".35em")
          .text(function(d) { return d.name; })   
            .on("mouseenter", function() {
                svg.selectAll('#' + d.name.replace(' ','') + ' path').
                   .style("stroke", "red");
             })
           .on("mouseleave", function(d) {
               svg.selectAll('#' + d.name.replace(' ','') + ' path').
                .style("stroke", color(d.name));
              });  

---

您愿意发布代码而不是图片吗？请在帖子中发布相关代码，而不是通过图片链接。请尝试

country。选择（“路径”）

而不是

d3。选择（“路径”）

。d3.select不会遍历DOM，因此我认为它找不到行<代码>d3。选择全部（“.line”）也可以。嗨，Hugues Stefanski！谢谢是的，你的两个选择都有效。现在的重点是，这些解决方案突出显示了所有线条，但我想要的是只改变一条线条的颜色（一个国家，我在图例中悬停）。你有什么建议吗？很好。谢谢乔治！哇！我想这对我来说是一个小小的进步。关键是。。。当我将它与外部tvs文件一起使用时，它不起作用：“UncaughtTypeError:无法读取未定义的属性'length'。我以您的示例（）为例，对其进行了修改：d.date=parseDate（d.date）；而不是d.date=parseDate（d.date.toString（））；有什么建议吗？是的，我不得不用json对象来代替tsv文件的读取（以及为什么我需要将日期转换为字符串）。哇！我有很多东西要学。。。我必须对您的示例进行哪些修改才能使其与外部文件一起工作？我尝试了几种方法，但是“UncaughtTypeError:无法读取未定义的属性'length'”总是出现。按照Mike Bostock提供的原始代码执行。d3.tsv（“data.tsv”，函数（错误，数据）{……}）；谢谢你，乔治。我还是个新人。现在我在读你的建议。

var country = svg.selectAll(".country")
          .data(countries)
        .enter().append("g")
          .attr("class", "country")
          .attr('id', function(d) { return d.name.replace(' ',''); });

     country.append("text")
          .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
          .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.outcome) + ")"; })
          .attr("x", 3)
          .attr("dy", ".35em")
          .text(function(d) { return d.name; })   
            .on("mouseenter", function() {
                svg.selectAll('#' + d.name.replace(' ','') + ' path').
                   .style("stroke", "red");
             })
           .on("mouseleave", function(d) {
               svg.selectAll('#' + d.name.replace(' ','') + ' path').
                .style("stroke", color(d.name));
              });