為什么d3行生成器在往返0或兩者時失敗-有解無憂

我試圖理解為什么d3.line在空值成功或前面為 0 或兩者兼而有之時失敗。

但是，如果不是這種情況，則生成器可以正常作業。

我正在處理不同國家/地區的資料集，并且我正在以編程方式生成一個名為的物件陣列，filter其中包含行生成器的資訊——它應該拾取陣列中的兩個特定索引來生成行。

如果它必須從(x1,0) to (x2,0)或 from(x1,0) to (x2,y2)或 from生成一條線，它將失敗(x1,y1) to (x2,0)。

詳細地說，生成器適用于以下資料集

 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" class="svg-container"></div>
    <svg></svg>
</body>

</html>

另一方面，如果資料以下列方式包含 null 和 0 ，則生成器將失敗。我已經包含了來自 4 個不同國家科摩羅、納勞、所羅門群島和湯加的資料，并且每個國家的發電機都發生故障。

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" class="svg-container"></div>
    <svg></svg>
    
    </body>

</html>

是否有可能有一個適用于上述兩種情況的生成器？

我還執行了以下測驗，以查看是否將未定義的值傳遞給生成器，但可能并非如此。

例如，以下回傳

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

然而，

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

回傳

M72.5,208.57142857142864Z

代替

M72.5,208.57142857142864, L120.83333333333334, 280

uj5u.com熱心網友回復：

以下對我有用，但我仍然不知道為什么生成器會這樣

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" class="svg-container"></div>
    <svg></svg>
</body>
<script type="text/javascript">
</script>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/491660.html

標籤：javascript d3.js

上一篇：以百分比設定時如何在對話框中查找div的高度和寬度

下一篇：JSD3使用Websocket更新力圖