Why d3 line generator fails when to and from 0 or both-CodePudding

I am trying to understand why d3.line fails when null values are either succeeded or preceded by 0 or both.

However, if that is not the case, the generator works fine.

I am working with a dataset for different countries and I am programmatically generating an array of objects called filter which contains the information for the line generator - which two particular indexes in the array it should pickup to generate the line.

It fails if it has to generate a line from (x1,0) to (x2,0) or from (x1,0) to (x2,y2) or from (x1,y1) to (x2,0).

To elaborate, the generator works fine with the following dataset

 const AfganisthanData = 
            [
        {"Region": "South Asia","Name": "Afghanistan","Year": 1997,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 1998,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 1999,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2000,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2001,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2002,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2003,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2004,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2005,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2006,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2007,"Value": 0.276859504132231},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2008,"Value": 0.276859504132231},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2009,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2010,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2011,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2012,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2013,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2014,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2015,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2016,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2017,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2018, "Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2019,"Value": 0.278688524590163},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2020,"Value": 0.270161290322581},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2021,"Value": 0.270161290322581}
    ]

const AfganisthanFilter = [
    {"from":-1, "to": 8},
    {"from":20, "to": 22}
]

    val = d3.line()
        .defined(d => d.Value)
        .x(d => scaleX(d.Year))
        .y(d => scaleY(d.Value))
        (dataX.filter((a) => a.Value !== null))

const AfganisthanData = 
            [
        {"Region": "South Asia","Name": "Afghanistan","Year": 1997,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 1998,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 1999,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2000,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2001,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2002,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2003,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2004,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2005,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2006,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2007,"Value": 0.276859504132231},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2008,"Value": 0.276859504132231},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2009,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2010,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2011,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2012,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2013,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2014,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2015,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2016,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2017,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2018, "Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2019,"Value": 0.278688524590163},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2020,"Value": 0.270161290322581},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2021,"Value": 0.270161290322581}
    ]

const AfganisthanFilter = [
    {"from":-1, "to": 8},
    {"from":20, "to": 22}
]
        height = 720,
            width = 1280;

        padding = {
            top: 70,
            bottom: 50,
            left: 70,
            right: 70
        }


        const boundHeight = height - padding.top - padding.bottom;
        const boundWidth = width - padding.right - padding.left;

        ////////////////////////////////////////////////////////////
        //////////////////////// 2 CREATE SCALE ////////////////////
        ////////////////////////////////////////////////////////////

        const data = AfganisthanData;
        const filter = AfganisthanFilter;

        const scaleX = d3.scaleLinear()
            .range([0, boundWidth])
            .domain(d3.extent(data, d => d.Year))

        const scaleY = d3.scaleLinear()
            .range([boundHeight, 0])
            .domain(d3.extent(data, d => d.Value))

        ////////////////////////////////////////////////////////////
        //////////////////////// 3 SVG// ///////////////////////////
        ////////////////////////////////////////////////////////////

        const svgns = 'http://www.w3.org/2000/svg'
        const svg = d3.select('svg')

        svg
            .attr('xmlns', svgns)
            .attr('viewBox', `0 0 ${width} ${height}`)

        svg.append('rect')
            .attr('class', 'vBoxRect')
            .style("overflow", "visible")
            .attr('width', `${width}`)
            .attr('height', `${height}`)
            .attr('stroke', 'red')
            .attr('fill', 'none')

        //create BOUND rect -- to be deleted later
        svg.append('rect')
            .attr('class', 'boundRect')
            .attr('x', `${padding.left}`)
            .attr('y', `${padding.top}`)
            .attr('width', `${boundWidth}`)
            .attr('height', `${boundHeight}`)
            .attr('fill', 'none')
            .attr('stroke', 'black')



        //create bound element
        bound = svg.append('g')
            .attr('class', 'bound')
            .style('transform', `translate(${padding.left}px,${padding.top}px)`)

        filter.forEach(
            (a, j, r) => {

                const dataX = data.filter(
                    (b, i) => i == r[j].from || i == r[j].to)

                val = d3.line()
                    .defined(d => d.Value)
                    .x(d => scaleX(d.Year))
                    .y(d => scaleY(d.Value))
                    (dataX.filter((a) => a.Value !== null))

                // console.log(datax)
                // console.log(val);
                bound.append('path')
                    .attr('class', `lineX${j}`)
                    .data([dataX])
                    .attr('d', val)
                    .attr('fill', 'none')
                    .attr('stroke', 'green')
            }
        )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>

    <div id="container" ></div>
    <svg></svg>
</body>

</html>

On the other hand, the generator fails if the data contains null and 0 in th the following way. I have included data from 4 different countries Comoros, Narau, Solomon Islands and Tonga and the generator fails for each of them.

const ComorosData =[
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1997,"Value": 0},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1998,"Value": 0},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1999,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2000,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2001,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2002,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2003,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2004,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2005,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2006,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2007,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2008,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2009,"Value": 0},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2010,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2011,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2012,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2013,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2014,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2015,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2016,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2017,"Value": 0.0606060606060605},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2018,"Value": 0.0606060606060605},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2019,"Value": 0.0606060606060605},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2020,"Value": 0.166666666666667},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2021,"Value": 0.166666666666667}
]

const ComorosData =[
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1997,"Value": 0},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1998,"Value": 0},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1999,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2000,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2001,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2002,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2003,"Value": null},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2004,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2005,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2006,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2007,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2008,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2009,"Value": 0},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2010,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2011,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2012,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2013,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2014,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2015,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2016,"Value": 0.0303030303030302},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2017,"Value": 0.0606060606060605},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2018,"Value": 0.0606060606060605},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2019,"Value": 0.0606060606060605},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2020,"Value": 0.166666666666667},
    {"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2021,"Value": 0.166666666666667}
]
 const ComorosFilter = [
    {"from":1, "to": 7}
]

const NarauData = [
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 1997,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 1998,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 1999,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2000,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2001,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2002,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2003,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2004,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2005,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2006,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2007,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2008,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2009,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2010,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2011,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2012,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2013,"Value": 0.0526315789473684},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2014,"Value": 0.0526315789473684},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2015,"Value": 0.0526315789473684},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2016,"Value": 0.0526315789473684},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2017,"Value": 0.105263157894736},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2018,"Value": 0.105263157894736},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2019,"Value": 0.105263157894736},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2020,"Value": 0.105263157894736},
    {"Region": "East Asia & Pacific","Name": "Nauru","Year": 2021,"Value": 0.105263157894736}
]

 const NarauFilter = [
    {"from":-1, "to": 1},
    {"from":2, "to": 4},
    {"from":5, "to": 7},
];

const SolomonData = [
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1997,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1998,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1999,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2000,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2001,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2002,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2003,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2004,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2005,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2006,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2007,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2008,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2009,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2010,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2011,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2012,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2013,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2014,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2015,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2016,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2017,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2018,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2019,"Value": 0.0408163265306122},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2020,"Value": 0.0638297872340425},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2021,"Value": 0.08}
]

const SolomonFilter = [
    {"from":-1, "to": 1},
    {"from":3, "to": 5}
]

const TongaData =[
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 1997,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 1998,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 1999,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2000,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2001,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2002,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2003,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2004,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2005,"Value": 0.0344827586206897},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2006,"Value": 0.0333333333333333},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2007,"Value": 0.0333333333333333},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2008,"Value": 0.03125},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2009,"Value": 0.03125},
    {"Region": "East Asia & Pacific","Name": "Tonga", "Year": 2010,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2011,"Value": 0.0357142857142857},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2012,"Value": 0.0357142857142857},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2013,"Value": 0.0357142857142857},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2014,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2015,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2016,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2017,"Value": 0.0769230769230769},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2018,"Value": 0.0740740740740741},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2019,"Value": 0.0740740740740741},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2020,"Value": 0.0740740740740741},
    {"Region": "East Asia & Pacific","Name": "Tonga","Year": 2021,"Value": 0}
]

const TongaFilter = [
    {"from":1, "to": 3},
    {"from":4, "to": 6}
]

        
 height = 720,
            width = 1280;

        padding = {
            top: 70,
            bottom: 50,
            left: 70,
            right: 70
        }


        const boundHeight = height - padding.top - padding.bottom;
        const boundWidth = width - padding.right - padding.left;

        ////////////////////////////////////////////////////////////
        //////////////////////// 2 CREATE SCALE ////////////////////
        ////////////////////////////////////////////////////////////

        const data = ComorosData;
        const filter = ComorosFilter;

        const scaleX = d3.scaleLinear()
            .range([0, boundWidth])
            .domain(d3.extent(data, d => d.Year))

        const scaleY = d3.scaleLinear()
            .range([boundHeight, 0])
            .domain(d3.extent(data, d => d.Value))

        ////////////////////////////////////////////////////////////
        //////////////////////// 3 SVG// ///////////////////////////
        ////////////////////////////////////////////////////////////

        const svgns = 'http://www.w3.org/2000/svg'
        const svg = d3.select('svg')

        svg
            .attr('xmlns', svgns)
            .attr('viewBox', `0 0 ${width} ${height}`)

        svg.append('rect')
            .attr('class', 'vBoxRect')
            .style("overflow", "visible")
            .attr('width', `${width}`)
            .attr('height', `${height}`)
            .attr('stroke', 'red')
            .attr('fill', 'none')

        //create BOUND rect -- to be deleted later
        svg.append('rect')
            .attr('class', 'boundRect')
            .attr('x', `${padding.left}`)
            .attr('y', `${padding.top}`)
            .attr('width', `${boundWidth}`)
            .attr('height', `${boundHeight}`)
            .attr('fill', 'none')
            .attr('stroke', 'black')



        //create bound element
        bound = svg.append('g')
            .attr('class', 'bound')
            .style('transform', `translate(${padding.left}px,${padding.top}px)`)


        filter.forEach(
            (a, j, r) => {

                const dataX = data.filter(
                    (b, i) => i == r[j].from || i == r[j].to)

              val = d3.line()
                    .defined(d => d.Value)
                    .x(d => scaleX(d.Year))
                    .y(d => scaleY(d.Value))
                    (dataX.filter((a) => a.Value !== null))

                //console.log(dataX)
                console.log(val);
                
                bound.append('path')
                    .attr('class', `lineX${j}`)
                    .data([dataX])
                    .attr('d', val)
                    .attr('fill', 'none')
                    .attr('stroke', 'green')
            }
        )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>

    <div id="container" ></div>
    <svg></svg>
    
    </body>

</html>

Is it possible to have a single generator that works for both the cases above?

I have also performed the following test to see if undefined values are passed on to the generator and probably that is not the case.

For example, the following returns

const data = SolomonData;
const filter = SolomonFilter;

data.forEach(
    (a,i)=>{
        a.scaleYr=scaleX(a.Year);
        a.scaleVal=scaleY(a.Value);})
        console.log(data.filter((a,i)=>i===3||i===5))

[           
{
    "Region": "East Asia & Pacific",
    "Name": "Solomon Islands",
    "Year": 2000,
    "Value": 0.0204081632653061,
    "scaleYr": 72.5,
    "scaleVal": 208.57142857142864
},
{
    "Region": "East Asia & Pacific",
    "Name": "Solomon Islands",
    "Year": 2002,
    "Value": 0,
    "scaleYr": 120.83333333333334,
    "scaleVal": 280
}
]

yet,

val = d3.line()
    .defined(d => d.Value)
    .x(d => scaleX(d.Year))
    .y(d => scaleY(d.Value))
    (dataX.filter((a) => a.Value !== null))

returns

M72.5,208.57142857142864Z

instead of

M72.5,208.57142857142864, L120.83333333333334, 280

CodePudding user response：

The following worked for me but I still don't know why the generator behaved like this

filter.forEach(
    (a, j, r) => {
        const dataX = data.filter(
            (b, i) => i == r[j].from || i == r[j].to);

        const cond = dataX.some((a) => a.Value === 0);

        const val = (cond === true) ?
            d3.line()
            .x(d => scaleX(d.Year))
            .y(d => scaleY(d.Value))
            (dataX) :
            d3.line()
            .defined(d => d.Value)
            .x(d => scaleX(d.Year))
            .y(d => scaleY(d.Value))
            (dataX.filter((a) => a.Value !== null))

        bound.append('path')
            .attr('class', `lineX${j}`)
            .attr('d', val)
            .attr('fill', 'none')
            .attr('stroke', 'green')
    }
)

const AfganisthanData = [{
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 1997,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 1998,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 1999,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2000,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2001,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2002,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2003,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2004,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2005,
        "Value": 0.273092369477912
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2006,
        "Value": 0.273092369477912
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2007,
        "Value": 0.276859504132231
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2008,
        "Value": 0.276859504132231
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2009,
        "Value": 0.273092369477912
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2010,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2011,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2012,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2013,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2014,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2015,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2016,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2017,
        "Value": 0.27710843373494
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2018,
        "Value": null
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2019,
        "Value": 0.278688524590163
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2020,
        "Value": 0.270161290322581
    },
    {
        "Region": "South Asia",
        "Name": "Afghanistan",
        "Year": 2021,
        "Value": 0.270161290322581
    }
]

const AfganisthanFilter = [{
        "from": -1,
        "to": 8
    },
    {
        "from": 20,
        "to": 22
    }
]
height = 400,
    width = 720;

padding = {
    top: 70,
    bottom: 50,
    left: 70,
    right: 70
}

const ComorosData = [{
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 1997,
        "Value": 0
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 1998,
        "Value": 0
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 1999,
        "Value": null
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2000,
        "Value": null
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2001,
        "Value": null
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2002,
        "Value": null
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2003,
        "Value": null
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2004,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2005,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2006,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2007,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2008,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2009,
        "Value": 0
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2010,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2011,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2012,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2013,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2014,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2015,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2016,
        "Value": 0.0303030303030302
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2017,
        "Value": 0.0606060606060605
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2018,
        "Value": 0.0606060606060605
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2019,
        "Value": 0.0606060606060605
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2020,
        "Value": 0.166666666666667
    },
    {
        "Region": "Sub-Saharan Africa",
        "Name": "Comoros",
        "Year": 2021,
        "Value": 0.166666666666667
    }
]
const ComorosFilter = [{
    "from": 1,
    "to": 7
}]

const NarauData = [{
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 1997,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 1998,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 1999,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2000,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2001,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2002,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2003,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2004,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2005,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2006,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2007,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2008,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2009,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2010,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2011,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2012,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2013,
        "Value": 0.0526315789473684
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2014,
        "Value": 0.0526315789473684
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2015,
        "Value": 0.0526315789473684
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2016,
        "Value": 0.0526315789473684
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2017,
        "Value": 0.105263157894736
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2018,
        "Value": 0.105263157894736
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2019,
        "Value": 0.105263157894736
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2020,
        "Value": 0.105263157894736
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Nauru",
        "Year": 2021,
        "Value": 0.105263157894736
    }
]

const NarauFilter = [{
        "from": -1,
        "to": 1
    },
    {
        "from": 2,
        "to": 4
    },
    {
        "from": 5,
        "to": 7
    },
];

const SolomonData = [{
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 1997,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 1998,
        "Value": 0.0204081632653061
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 1999,
        "Value": 0.0204081632653061
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2000,
        "Value": 0.0204081632653061
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2001,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2002,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2003,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2004,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2005,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2006,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2007,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2008,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2009,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2010,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2011,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2012,
        "Value": 0.02
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2013,
        "Value": 0.02
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2014,
        "Value": 0.02
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2015,
        "Value": 0.02
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2016,
        "Value": 0.02
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2017,
        "Value": 0.02
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2018,
        "Value": 0.0204081632653061
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2019,
        "Value": 0.0408163265306122
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2020,
        "Value": 0.0638297872340425
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Solomon Islands",
        "Year": 2021,
        "Value": 0.08
    }
]

const SolomonFilter = [{
        "from": -1,
        "to": 1
    },
    {
        "from": 3,
        "to": 5
    }
]

const TongaData = [{
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 1997,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 1998,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 1999,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2000,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2001,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2002,
        "Value": null
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2003,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2004,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2005,
        "Value": 0.0344827586206897
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2006,
        "Value": 0.0333333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2007,
        "Value": 0.0333333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2008,
        "Value": 0.03125
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2009,
        "Value": 0.03125
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2010,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2011,
        "Value": 0.0357142857142857
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2012,
        "Value": 0.0357142857142857
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2013,
        "Value": 0.0357142857142857
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2014,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2015,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2016,
        "Value": 0
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2017,
        "Value": 0.0769230769230769
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2018,
        "Value": 0.0740740740740741
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2019,
        "Value": 0.0740740740740741
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2020,
        "Value": 0.0740740740740741
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Tonga",
        "Year": 2021,
        "Value": 0
    }
]

const TongaFilter = [{
        "from": 1,
        "to": 3
    },
    {
        "from": 4,
        "to": 6
    }
]

const names = ["Comoros", "Afganisthan", "Narau", "Tonga", "Solomon"];

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;

////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////

const data = NarauData;
const filter = NarauFilter;

const scaleX = d3.scaleLinear()
    .range([0, boundWidth])
    .domain(d3.extent(data, d => d.Year))

const scaleY = d3.scaleLinear()
    .range([boundHeight, 0])
    .domain(d3.extent(data, d => d.Value))

////////////////////////////////////////////////////////////
//////////////////////// 3 SVG// ///////////////////////////
////////////////////////////////////////////////////////////

const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')

svg
    .attr('xmlns', svgns)
    .attr('viewBox', `0 0 ${width} ${height}`)

svg.append('rect')
    .attr('class', 'vBoxRect')
    .style("overflow", "visible")
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('stroke', 'red')
    .attr('fill', 'none')

//create BOUND rect -- to be deleted later
/*svg.append('rect')
    .attr('class', 'boundRect')
    .attr('x', `${padding.left}`)
    .attr('y', `${padding.top}`)
    .attr('width', `${boundWidth}`)
    .attr('height', `${boundHeight}`)
    .attr('fill', 'none')
    .attr('stroke', 'black')*/



//create bound element
bound = svg.append('g')
    .attr('class', 'bound')
    .style('transform', `translate(${padding.left}px,${padding.top}px)`)

filter.forEach(
    (a, j, r) => {

        const dataX = data.filter(
            (b, i) => i == r[j].from || i == r[j].to)
        const cond = dataX.some((a) => a.Value === 0);
        const val = (cond === true) ?
            d3.line()
            .x(d => scaleX(d.Year))
            .y(d => scaleY(d.Value))
            (dataX) :
            d3.line()
            .defined(d => d.Value)
            .x(d => scaleX(d.Year))
            .y(d => scaleY(d.Value))
            (dataX.filter((a) => a.Value !== null))




        bound.append('path')
            .attr('class', `lineX${j}`)
            .attr('d', val)
            .attr('fill', 'none')
            .attr('stroke', 'green')
    }
);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>

    <div id="container" ></div>
    <svg></svg>
</body>
<script type="text/javascript">
</script>
</html>