d3 path.line stroke-width с оператором IF / троичным оператором

Question

Попытка изменить ширину штриха линии с помощью оператора IF / троичного оператора, например if d.country === "China" stroke-width: 2. Это должен быть атрибут path.line, так что это то, к чему я его присоединяю после вызова line.

Я добавил countryName к объекту выбросов, я также заметил, что условие всегда ЛОЖЬ, поэтому ширина хода равна 0,5. Почему это не правда?

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

Answer 1

Что означает rioV8, так это то, что у вас уже есть выбор группы, поэтому вам просто нужно использовать groups для добавления новых элементов.

groups - это выборка всех ваших g, где вы хотите добавить свои пути. Точно так же, как вы не выбираете снова, чтобы добавить заголовки.

groups
    .append("path").classed("line", true)
    .attr("d", d=> line(d.emissions))
    .style("stroke-width", d => 
        d.country === "China" ? 5 : 0.5
    )