Javascript 两行D3.js折线图，一行从不同位置开始

我正在D3.js中创建一个包含两行的折线图。第二行需要在比第一行晚的日期开始（并渲染）。我用于图表的数据如下所示：

var data = [{
    date: "1-May-12",
    close: "58.13",
    open: "58.13"
}, {
    date: "30-Apr-12",
    close: "53.98",
    open: "53.98"
}, {
    date: "27-Apr-12",
    close: "67.00",
    open: "67.00"
}, {
    date: "26-Apr-12",
    close: 0,
    open: "89.70"
}, {
    date: "25-Apr-12",
    close: 0,
    open: "99.00"
}];

在我当前的示例中，两条线都被绘制，但第二条线（闭合）被绘制在图形的底部，然后跳到第三个值。当有数据时，我需要线路启动。我已尝试将值从0更改为null，但没有成功。如何更改图形，使第二行仅在有实际数据时开始

有关示例，请参见此JSFIDLE：

---

提前感谢。

我建议您创建两个数据集-第一个用于

打开

行，第二个用于

关闭

行

var dataForClose = data.reduce(function(store, d) {
    if (d.close) {
    store.push(d);
  }

  return store;
}, []);


var dataForOpen = data.reduce(function(store, d) {
    if (d.open) {
    store.push(d);
  }

  return store;
}, []);

// Add the 2nd valueline path.
svg.append("path")
    .attr("class", "line")
    .style("stroke", "red")
    .attr("d", valueline2(dataForOpen)); // <--!!


// Add the valueline path.
svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(dataForClose)); // <--!!

body{font:12px Arial；}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}

---

您可以使用

defined（）

定义行的位置和未定义行的位置。例如，要在0（或更小）时将该行设置为未定义，可以使用：

var valueline = d3.svg.line()
   .defined(function(d) {return d.close > 0})
   .x(function(d) { return x(d.date); })
   .y(function(d) { return y(d.close); });

这将导致线不会在任何位置绘制

d。关闭
is