score:3

Accepted answer

console.log is splitting code. Here is the error:

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);
}

Should be:

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)
}

Updated demo: https://codepen.io/anon/pen/qQRJXp

UPDATED after @Shashank comment

highlightPath is a mouseover event bound to the path which results in d3.select(this) to be the path itself and so you won't need any .select(path#pathID) in this case but just d3.select(this).classed('highlighted', true)

score:0

Try this:

 function highlightPath(d) {

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

    console.log(pathID);

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

Related Query