堆栈内存溢出
  繁体   English   中英

为什么 d3 行生成器在往返 0 或两者时失败

[英]Why d3 line generator fails when to and from 0 or both

 原文  2022-06-10 00:14:20  3   1    javascript/ d3.js

问题描述

我试图理解为什么d3.line在空值成功或前面为 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":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

1 个解决方案

解决方案1
 0 已采纳  2022-06-10 19:04:32

以下对我有用，但我仍然不知道为什么生成器会这样

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么 d3 行生成器因使用围绕空值的比例而失败 向左绘制时d3线过渡失败 D3：选择行时从字典填充表 在d3线生成器上的重复方法上获得更好的性能 D3线生成器仅生成NaN值 为什么我的 D3 图表中的线反转了？ 为什么只有当我将数据放入 function 行时才绘制 d3 线？ 创建自定义D3生成器 D3 JS折线图从0开始 为什么此 D3 图表中的线条在更新时无法正确显示？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM