d3 用于说明折线图中缺失的数据

Question

我正在使用 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 在这之间不生成任何东西。

我希望在那个时期之间有一个差距。

更新

我遇到了 defined 语法，并像下面这样尝试了它，但当前数据不起作用。

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))

我想在这里理解的是，为了 defined 工作

我是否需要首先整理我的数据，使其包含每个 X 轴年份和相应的 Y 轴值（缺失年份为空）？

或者有没有办法让 defined 计算出 缺失的年份 而无需作者对数据进行争论？

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
    });
};

Answer 1

您只需添加要跳过的数据点（年），使用稍后由 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>

d3 用于说明折线图中缺失的数据

d3 to account for missing data in line chart

javascript

d3.js