小贝子编程

为什么d3行生成器在to和from 0或两者都出现故障



我试图理解为什么d3.line当空值成功或前面有0或同时有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

以下内容对我有效，但我仍然不知道为什么生成器的行为是这样的

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium