将空值传递给SVG路径(使用d3.js)以抑制丢失的数据

Question

使用jQuery Flot,我可以将null值传递给绘图机制,因此它不会在绘图上绘制任何内容.查看丢失记录的抑制方式:

我正在寻求移动d3js,以便我可以使用SVG对图形进行更深层次的低级控制.但是,我还没有找到如何做同样的抑制丢失记录的过程.下面的图像是尝试使用值0而不是null(d3包中断)的值.以下是一些代码,可以让您了解我如何生成下图:

var line = d3.svg.line()
    .x(function(d) {
       var date = new Date(d[0]);
       return x(date);
    })
    .y(function(d) {
       var height = d[1]; 
       if (no_record_exists) {
           return y(0);
       }
       return y(height) + 0.5;
    });

我path在Mozilla开发者网络上查找了SVG 元素,我发现有一个MoveTo命令,M x y它只会将"笔"移动到某个点而不会绘制任何东西.这是否已在d3js包中实现,因此path每次遇到丢失的记录时我都不必创建多个元素？

Answer 1

该defined功能d3.svg.line()是这样做的方法

假设如果y为null,我们想在图表中包含一个中断:

line.defined(function(d) { return d.y!=null; })

Answer 2

使用line.defined或area.defined,并查看" 缺少数据的区域"示例.