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

uj5u.com熱心網友回復：

您只需使用稍后驗證的值添加要跳過的資料點（年）line.defined。您可以以編程方式執行此操作，但在這里我只是將 2001 年硬編碼為nullas 值。

然后，您的線路生成器可以是：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/482529.html

標籤：javascript d3.js

上一篇：在Svelte和d3中使用靜態力布局創建網路

下一篇：無法使用d3force和Svelte更新節點位置