使用d3绘制非连续线条

Question

我正在使用d3.js制作一个简单的折线图。我想知道是否有一种方法可以在图表中创建“空洞”，也就是说，如果没有数据可用，线条是否可以被中断或切断。

我正在研究从定义域中删除不需要的位置，或者在特定的段中将线条宽度设置为0，但我找不到任何方法来实现这两个目标。

谢谢你的帮助！

- julio

Answer 1

D3的line生成器内置了一个函数line.defined，你可以使用这个函数来控制你的线在哪里被定义，在哪里没有被定义（比如你有缺失数据的地方）。如果你想让你的线在点数组中的第二个值是javascript NaN值时变为未定义状态，你可以这样说：

line.defined(function(d) { return !isNaN(d[1]); });

这里是这一行动的一个很好的例子。

- Josh

---

你的示例无法正常工作，因为如果 d 是 null，函数将不会被调用或无法确定未定义位置在哪里（例如在 x 轴上）。在块代码中使用的代码是 return d.y != null。 - Jonathan

谢谢@Rouby。我已经使用API文档中的当前示例更新了答案。 - Josh

它只在数据具有未定义类型的值时才起作用。如果键是离散的，但每个键都有一个值呢？ - jiafeng fu