Javascript d3无法读取属性'；分类为'；未定义的

试图通过抓取当前路径的pathID并为其分配类来高亮显示当前路径行。高亮显示

使笔划宽度为2px

console.log显示当前路径ID，但它不想分配类。请帮忙。我做错了什么

还有一个函数，我试图在其中分配一个类：

    function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    let currentId = d3.select(this).select("path#" + pathID)
    console.log("Current ID: ",currentId)
    .classed("highlight", true);
}

---

console.log

正在拆分代码。以下是错误：

function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    let currentId = d3.select(this).select("path#" + pathID)
    console.log("Current ID: ",currentId) /* <<<<<<<<< HERE (line 218 in your codepen) */ 
    .classed("highlight", true);
}

更新的演示：

在@Shashank评论后更新

highlightPath

是绑定到路径的

mouseover

事件，导致

d3.选择（this）

作为路径本身，这样您就不需要任何

。在本例中选择（路径#路径ID）

，但只需

d3.选择（此）.classed（'highlighted'，true）

试试这个：

 function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    d3.select("path#" + pathID)
    .attr("class", "highlight");
}

---

很好，但是更新的codepen仍然没有正确应用highlight类。这个问题的标题是d3无法读取未定义的属性“classed”-我回答了这个问题。请避免在一篇文章中问多个问题。@EdgarKiljak这是您问题的正确答案。如果您注释掉

console.log（）

或按照@qiAlex的回答移动行，代码笔工作正常。抱歉打断一下，但我发现它不工作，原因如下：

highlightPath

是绑定到

path

的鼠标悬停事件，结果是

d3。选择（此）

成为

路径本身，因此您不需要任何
。在本例中选择（路径#路径ID）
，但只选择
d3。选择（此）.classed（'highlighted'，true）
应该有效。@EdgarKiljak，这又是一个不同的问题。这是关于CSS选择器的使用。在您的例子中，类
高亮显示
实际上设置在路径上。但是，您不会看到任何更改，因为更具体的
path.line
选择器和元素本身的
style
属性会胜过它。
function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    let currentId = d3.select(this).classed('highlight', true) // thanks to @shashank

    console.log("Current ID: ", currentId)
}

 function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    d3.select("path#" + pathID)
    .attr("class", "highlight");
}