Ndtyjky

Trying to change line stroke-width with an IF statement / ternary operator e.g. if d.country === "China" stroke-width: 2. This has to be a path.line attribute so this is what I'm attaching it to after line is called.

I've added countryName to the emissions object, I have also noticed that condition is always FALSE so the stroke-width is 0.5. Why its not TRUE?

Codepen

//Define line chart with and height 

const width = fullWidth - margin.left - margin.right;

const height = fullHeight - margin.top - margin.bottom;



//Define x and y scale range

let xScale = d3.scaleLinear()

    .range([0, width])



let yScale = d3.scaleLinear()

    .range([0, height])



//Define x and y axis

let xAxis = d3.axisBottom(xScale)

    .ticks(15)



let yAxis = d3.axisLeft(yScale)

    .ticks(10)





//Draw svg

let svg = d3.select("body")

    .append("svg")

    .attr("width", fullWidth)

    .attr("height", fullHeight)

    .append("g")

    .attr("transform", "translate(" + 53 + "," + 0 +")");



d3.json("https://api.myjson.com/bins/izmg6").then(data => {

    console.log(data);







    //Structure data so should be an array of arrays  etc [[x,y], [x,y], [x,y]]



    let years = d3.keys(data[0]).slice(0, 50);

    console.log(years);



    let dataset = ;



    data.forEach((d, i) => {



        let myEmissions = ;



        years.forEach(y => {

            if (d[y]) {



                myEmissions.push({

                    country: d.countryName,

                    year: y,

                    amount: d[y]

                })

            }

        })



        dataset.push({

            country: d.countryName,

            emissions: myEmissions

        });

    })



    console.log(dataset);



    //Define x and y domain

    xScale

        .domain(d3.extent(years, d =>d))



    yScale

        .domain([d3.max(dataset, d =>

        d3.max(d.emissions, d =>

            +d.amount)), 0])





    //Generate line

    let line = d3.line()

                .curve(d3.curveBasis)  

                .x(d => 

                    xScale(d.year))

                .y(d => 

                    yScale(d.amount));





    let groups = svg.selectAll("g")

        .data(dataset)

        .enter()

        .append("g")





    groups.append("title")

        .text(d => d.country)





    groups.selectAll("path")

        .data(d => [d.emissions])

        .enter()

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

        .attr("d", line)

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

            d.country === "China" ? 10 : 0.5

        )





}).catch(error => console.log(error))

What rioV8 meant is that you already have your group selection, so you just need to use groups to append new elements.

groups is a selection of all your g, it's where you want to append your paths. The same way you're not selecting again to add the titles.

groups

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

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

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

        d.country === "China" ? 5 : 0.5

    )