Vfrdtyky

Trying to highlight current path line by grabbing pathID of a current path and assigning it a class .highlight that makes stroke-width: 2px.

console.log shows current pathID but it doesn't want to assign a class. Please help. What am I doing wrong here?

Codepen

//Generate group (main)

    let groups = svg.selectAll("g")

        .data(dataset)

        .enter()

        .append("g")

        .on("mouseover", function(d) {

            d3.select(this)

                .call(revealCityName)

        })

        .on("mouseout", hideCityName)



//Path (path #, path line)

groups

    .append("path").classed("line", true)

    .attr("id", function(d) {

        console.log(d.country)

        if (d && d.length != 0) {

            return d.country.replace(/ |,|./g, '_');

        }

    })

    .attr("d", d => line(d.emissions))

    .classed("unfocused", true)

    .style("stroke-width", d =>

        d.country === "China" ? 1 : 0.2

    )

    .on("mouseover", highlightPath);



//Text (contries on the left y axis)

groups

    .append("text")

    .datum(function(d) {

        return { country: d.country, value: d.emissions[d.emissions.length - 1]};

    })

    .attr("transform", function(d) {

        if (d.value) {

            return "translate(" + xScale(d.value.year) + "," + yScale(d.value.amount) + ")";

        } else {

            return null;

        }

    })

    .attr("x", 3)

    .attr("dy", 4)

    .style("font-size", 10)

    .style("font-family", "Abril Fatface")

    .text(d => d.country)

    .classed("hidden", function(d) {

        if (d.value && d.value.amount > 700000) {

            return false

        } else {

            return true;

        }

    })

And a function where I'm trying to assign a class:

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

Try this:

 function highlightPath(d) {



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



    console.log(pathID);



    d3.select("path#" + pathID)

    .attr("class", "highlight");

}