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

Posted 2023-02-23

【中文标题】将空值传递给 SVG 路径（使用 d3.js）以抑制丢失数据

【英文标题】：Pass null values to SVG path (using d3.js) to suppress missing data

【发布时间】：2012-03-23 17:07:03

【问题描述】：

使用 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;
    );

我在 Mozilla Developer Network 上查找了 SVG path 元素，发现有一个 MoveTo 命令 M x y，它只会将“笔”移动到某个点而不绘制任何内容。这是否在d3js 包中实现，这样我就不必在每次遇到缺失记录时创建多个path 元素？

【问题讨论】：

请注意，使用 MoveTo 非常适合在简单（仅笔划）线条中出现间隙，但不适用于上面显示的绿色填充。为此，您需要不同的形状或多余的路径命令来下降到基线，超过正确的数量，然后再次返回。

喜欢这些图表，但另请参阅：***.com/questions/15259444/…

【参考方案1】：

d3.svg.line() 的 defined 函数就是这样做的方法

假设如果 y 为空，我们想在图表中包含一个中断：

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

【参考方案2】：

使用line.defined 或area.defined，并查看Area with Missing Data 示例。

【讨论】：

谢谢，我会查一下。实际上，我只是在 Github 上提出了一个关于这个的问题 :) 虽然不太确定如何推进它:( github.com/mbostock/d3/issues/583

什么是 d3.split？该页面上没有任何内容。可能还应该更新您的回复，因为***.com/questions/15259444/… 现在展示了如何做到这一点。