Created
January 7, 2022 17:00
-
-
Save jkeefe/b28167f8b47aa7e37480dfff93c307dc to your computer and use it in GitHub Desktop.
Have D3 not draw missing data in line charts using line.defined
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// rig example, in config.js | |
const path = line() | |
.curve(curveMonotoneX) | |
.x(d => x(d.date)) | |
.y(d => y(d.value)) | |
.defined(d => (d.value !== null) && (d.value !== -999)); | |
// d3 generic example, from: https://bl.ocks.org/EmbraceLife/b8dda609b87a3bab7e952769fd028f53 | |
var line = d3.line() | |
.defined(function(d) { return d; }) | |
.x(function(d) { return x(d.x); }) | |
.y(function(d) { return y(d.y); }); | |
// more here: https://www.geeksforgeeks.org/d3-js-line-defined-method/ | |
// "The d3.line.defined() method lets you specify whether | |
// there is data defined for a given data point or not. If | |
// this method returns false, this means that data point exists, else true. | |
// Syntax: d3.line.defined(data_point); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment