小贝子编程

d3以解释折线图中缺失的数据



我使用d3.js创建一个数据驱动的path。但path不能解释丢失的数据。

例如,

const src = [{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1997,
"Value": 15.540540540540499
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1998,
"Value": 15.540540540540499
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1999,
"Value": 22.4489795918367
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2000,
"Value": 22.972972972973
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2002,
"Value": 25.3333333333333
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2003,
"Value": 25.3333333333333
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2004,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2005,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2006,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2007,
"Value": 26.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2008,
"Value": 26.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2009,
"Value": 27.3333333333333
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2010,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2011,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2012,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2013,
"Value": 26
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2014,
"Value": 26
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2015,
"Value": 26.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2016,
"Value": 28.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2017,
"Value": 28.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2018,
"Value": 28.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2019,
"Value": 30.463576158940398
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2020,
"Value": 30.463576158940398
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2021,
"Value": 31.125827814569501
}
]
////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;
const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')
svg
//.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
.attr('class', 'vBoxRect')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', 'none')
.attr('stroke', 'red')
////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
top: 70,
bottom: 50,
left: 70,
right: 190
}
const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width  - padding.right - padding.left;
//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', 'green')
//create bound element
const bound = svg.append('g')
.attr('class', 'bound')
//specify transform, must be .style and not .attr, px needs to be mentioned
.style('transform', `translate(${padding.left}px,${padding.top}px)`)
////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////

const scaleX = d3.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(src, d => d.Year))
const scaleY = d3.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(src, d => d.Value))
////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    
bound.append('g').attr('class', 'yAxis')
.append('g').attr('class', 'yAxisDetail')    
.call(d3.axisLeft(scaleY) ) 
const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1 
const minYear = Math.min([...src])
bound.append('g')
.attr('class', 'xAxis')
.append('g')
.attr('class', 'xAxisBottom')
.style('transform', `translateY(${boundHeight}px)`)
.call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))    
////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    

const line = d3.line()   
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))

bound.append('g')
.attr('class', 'valLine')
.append('path')
.attr('d', line(src))
.attr('stroke', 'black')
.attr('fill', 'none')
<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>

Year=2001无数据。然而，d3正在生成2001之间的路径和2002． 我怎么能要求d3不生成任何东西之间。

我希望在这两个时期之间有一个间隙。

我遇到了定义的语法，并尝试像下面这样使用当前数据，但无法工作。 
const line = d3.line() 
.defined(d=>  d.Year !== 2001 ) 
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))

然而，当我把数据整理成这个

src.push(   {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2001,
"Value": null
})

src.sort((a,b)=>a.Year-b.Year);

并尝试下面的操作，它成功了

const line = d3.line() 
.defined(d=>  d.Value !== null )    
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))

这里我想理解的是，为了定义

工作我是否需要首先以某种方式整理我的数据，以便它包含每个x轴年份和相应的y轴值(缺失的年份为空)?

或者是否有方法定义计算缺失的年份不需要作者整理数据?

const src = [{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1997,
"Value": 15.540540540540499
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1998,
"Value": 15.540540540540499
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1999,
"Value": 22.4489795918367
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2000,
"Value": 22.972972972973
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2002,
"Value": 25.3333333333333
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2003,
"Value": 25.3333333333333
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2004,
"Value": 24.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2005,
"Value": 24.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2006,
"Value": 24.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2007,
"Value": 26.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2008,
"Value": 26.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2009,
"Value": 27.3333333333333
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2010,
"Value": 24.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2011,
"Value": 24.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2012,
"Value": 24.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2013,
"Value": 26
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2014,
"Value": 26
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2015,
"Value": 26.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2016,
"Value": 28.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2017,
"Value": 28.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2018,
"Value": 28.6666666666667
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2019,
"Value": 30.463576158940398
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2020,
"Value": 30.463576158940398
}, {
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2021,
"Value": 31.125827814569501
}
]
// src.push(    {
//         "Region": "East Asia & Pacific",
//         "Name": "Australia",
//         "Year": 2001,
//         "Value": null
//     })
//  src.sort((a,b)=>a.Year-b.Year);
////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;
const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')
svg
//.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
.attr('class', 'vBoxRect')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', 'none')
.attr('stroke', 'red')
////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
top: 70,
bottom: 50,
left: 70,
right: 190
}
const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;
//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', 'green')
//create bound element
const bound = svg.append('g')
.attr('class', 'bound')
//specify transform, must be .style and not .attr, px needs to be mentioned
.style('transform', `translate(${padding.left}px,${padding.top}px)`)
////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////

const scaleX = d3.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(src, d => d.Year))
const scaleY = d3.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(src, d => d.Value))
////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    
bound.append('g').attr('class', 'yAxis')
.append('g').attr('class', 'yAxisDetail')
.call(d3.axisLeft(scaleY))
const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1
const minYear = Math.min(...src.map(d => d.Year))
for (let i = minYear; i <= minYear + count + 1; i++) {
const len = src.filter(a => a.Year == i).length;
(len == 1) ? null: src.push({
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": i,
"Value": null
});
};
src.sort((a, b) => a.Year - b.Year);
bound.append('g')
.attr('class', 'xAxis')
.append('g')
.attr('class', 'xAxisBottom')
.style('transform', `translateY(${boundHeight}px)`)
.call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))
.call(a => a.selectAll('rect') //this is required to check if the tooltip is working as desired     
.data(d3.selectAll(".xAxisBottom>.tick:not(:last-child)"))
.join('rect')
.attr('x', '0')
.attr('y', '0')
.attr('height', `${boundHeight}`)
.attr('width', `${scaleX(1998)}`)
.attr('class', (d, i) => {
return `bgRect${i}`
})
.attr('fill', 'none')
.style('stroke', 'black')
.style('stroke-opacity', '0.1')
.attr('transform', (d, i) => {
const attributeX = d.getAttribute('transform').match(/(d+.d+)(?=,)|(d+)(?=,)/gm)
const attributeY = boundHeight * -1;
return `translate(${attributeX} ${attributeY})`
})

)
////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    
const line = d3.line()
.defined(d => d.Value !== null)
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))
bound.append('g')
.attr('class', 'valLine')
.append('path')
.attr('d', line(src))
.attr('stroke', 'black')
.attr('fill', 'none')
<!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>

我总是可以动态地添加缺失的值，如果这是使定义的唯一方法的话生成路径中的间隙

const count = [...new Set(data2)].length - 1
const minYear = Math.min(...src.map(d => d.Year))
for (let i = minYear; i <= minYear + count + 1; i++) {
const len = src.filter(a => a.Year == i).length;
(len == 1) ? null: src.push({
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": i,
"Value": null
});
};

您只需要添加想要跳过的数据点(年)，使用稍后由line.defined验证的值。您可以通过编程方式执行此操作，但这里我只是硬编码2001年，并将null作为值。

那么，你的行生成器可以是:

const line = d3.line()
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))
.defined(d => d.Value)

既然null是假的，我只是检查Value是否为真。

修改后的代码:

const src = [{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1997,
"Value": 15.540540540540499
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1998,
"Value": 15.540540540540499
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 1999,
"Value": 22.4489795918367
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2000,
"Value": 22.972972972973
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2001,
"Value": null
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2002,
"Value": 25.3333333333333
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2003,
"Value": 25.3333333333333
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2004,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2005,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2006,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2007,
"Value": 26.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2008,
"Value": 26.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2009,
"Value": 27.3333333333333
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2010,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2011,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2012,
"Value": 24.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2013,
"Value": 26
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2014,
"Value": 26
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2015,
"Value": 26.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2016,
"Value": 28.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2017,
"Value": 28.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2018,
"Value": 28.6666666666667
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2019,
"Value": 30.463576158940398
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2020,
"Value": 30.463576158940398
},
{
"Region": "East Asia & Pacific",
"Name": "Australia",
"Year": 2021,
"Value": 31.125827814569501
}
]
////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;
const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')
svg
//.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
.attr('class', 'vBoxRect')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', 'none')
.attr('stroke', 'red')
////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
top: 70,
bottom: 50,
left: 70,
right: 190
}
const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;
//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', 'green')
//create bound element
const bound = svg.append('g')
.attr('class', 'bound')
//specify transform, must be .style and not .attr, px needs to be mentioned
.style('transform', `translate(${padding.left}px,${padding.top}px)`)
////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////

const scaleX = d3.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(src, d => d.Year))
const scaleY = d3.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(src, d => d.Value))
////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    
bound.append('g').attr('class', 'yAxis')
.append('g').attr('class', 'yAxisDetail')
.call(d3.axisLeft(scaleY))
const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1
const minYear = Math.min([...src])
bound.append('g')
.attr('class', 'xAxis')
.append('g')
.attr('class', 'xAxisBottom')
.style('transform', `translateY(${boundHeight}px)`)
.call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))
////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    
const line = d3.line()
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))
.defined(d => d.Value)
bound.append('g')
.attr('class', 'valLine')
.append('path')
.attr('d', line(src))
.attr('stroke', 'black')
.attr('fill', 'none')
<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