Skip to content

Instantly share code, notes, and snippets.

@jkeefe
Created January 7, 2022 17:00
Show Gist options
  • Save jkeefe/b28167f8b47aa7e37480dfff93c307dc to your computer and use it in GitHub Desktop.
Save jkeefe/b28167f8b47aa7e37480dfff93c307dc to your computer and use it in GitHub Desktop.
Have D3 not draw missing data in line charts using line.defined
// 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