如果 null 前面和/后面为 0，为什么 d3 行生成器会失败

【问题标题】：Why d3 line generator fails if null is preceded and/ succeeded by 0如果 null 前面和/后面为 0，为什么 d3 行生成器会失败
【发布时间】：2022-06-10 20:49:56
【问题描述】：

我试图理解为什么 d3.line 在 null 值成功或前面为 0 或两者兼有时会失败。

但是，如果不是这种情况，生成器可以正常工作。

我正在处理不同国家/地区的数据集，并且我正在以编程方式生成一个名为 filter 的对象数组，其中包含行生成器的信息 - 从数组中的哪个索引到它应该拾取以生成行的索引.

如果它必须从(x1,0) to (x2,0) 或(x1,0) to (x2,y2) 或(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":3, "to": 5},
];

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>

是否可以有一个适用于上述两种情况的生成器？

【问题讨论】：

    标签： javascript d3.js


    【解决方案1】：

    我认为问题实际上在于您的过滤方式。例如：

    // This filter...
const AfganisthanFilter = [
    {"from":-1, "to": 8},
    {"from":20, "to": 22}
]
// applied later with this function
filter.forEach((a, j, r) => {
    const dataX = data.filter((b, i) => i == r[j].from || i == r[j].to)
))
// is making an array with the 9th, 21st and 23rd elements of the array. I that what you want?

    【讨论】：

      猜你喜欢
      • 2015-06-25
      • 1970-01-01
      • 1970-01-01
      • 2021-05-09
      • 2013-07-23
      • 1970-01-01
      • 1970-01-01
      • 2021-11-27
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode