Javascript 缺少值的多系列图表（D3）

我想在此基础上用D3创建一个多系列折线图。我的问题是，缺少一些值：

y    x1   x2   x3
1   0.8       0.7
2   0.9       0.7
3   0.9  1.2  0.7
4        1.1  0.7
5   0.8  1.1  2.7
6   0.9  1.2  2.6
7        1.3  0.8

我想得到以下图表：

开始或结束时的缺失点应忽略不计。我可以通过

d3.svg.line().defined(function (d) { return d.value; }

但是，如果一条线内缺少某些点，则该线不应中断。代码位于绿线（x1）上方时，在y=3处停止，并在y=5处继续。但我想把这些点连接起来

在不使用

line（）.defined（）

的情况下，所有缺失的点都被当作其值为

0

来处理

下面是代码，我曾经找到一种实现该功能的方法：

---

我认为，在将数据数组传递给我的图表函数之前，替换数据数组中缺失的点并不是解决方案，因为我必须在图例和工具提示中显示值，而我无法在此处显示计算值。例如，如果我将鼠标移到y=4上，图例中应该会出现

x1:--x2:1.1 x3:0.8

（x1在这里没有任何值）。此外，（真实）点应显示为圆。我也不想在内存中有两个数据表（一个包含实际测量数据，另一个包含图表线的增强数据）。

我可以解决它，但我不确定是否可以通过转换以这种方式处理数据更新。我稍微更改了数据格式，现在正在分别绘制每一行：

---

如果要在中间连接丢失的值而不连接的那部分，如果它在前面或后面丢失了它的值：可能是如果你可以循环遍历你的数据，并找到每个X列的第一个和最后一个定义的值，然后在定义的函数（d，i）{if（i＜xDeal[f][1]i> xDeal[St]）中找到。return false；else return true；}）Hi@stofl，请您指出代码的哪个部分允许将缺少的值视为0。我正在努力实现这一点。到目前为止，它们只是没有出现在图表上。谢谢，功能

line1

（第12行）和

line2

（第16行）之间存在差异。据我记忆所及，当值为

null

时，第13行中的函数

x（）

返回

0

。

var data = [
    {
        name: "x1",
        color: "green",
        data: [
            [1, 0.8],
            [2, 0.9],
            [3, 0.9],
            [5, 0.8],
            [6, 0.9]
        ]
    },
    {
        name: "x2",
        color: "red",
        data: [
            [3, 1.2],
            [4, 1.1],
            [5, 1.1],
            [6, 1.2],
            [7, 1.3]
        ]
    },
    {
        name: "x3",
        color: "blue",
        data: [
            [1, 0.7],
            [2, 0.7],
            [3, 0.7],
            [4, 0.7],
            [5, 2.7],
            [6, 2.6],
            [7, 0.8]
        ]
    },
];

var margin = [20, 20, 20, 20];
var w = 400 - margin[1] - margin[3];
var h = 300 - margin[0] - margin[2];

var x = d3.time.scale().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
var lineFunction = d3.svg.line()
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); });

graph = d3.select('#line')
    .append("svg:svg")
        .attr("class", "line-graph")
        .attr("width", w + margin[1] + margin[3])
        .attr("height", h + margin[0] + margin[2])  
    .append("svg:g")
        .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");

x.domain([
    d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[0]; }); }),
    d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[0]; }); })
]);

y.domain([
    d3.min(data, function(c) { return d3.min(c.data, function(v) {  return +v[1]; }); }),
    d3.max(data, function(c) { return d3.max(c.data, function(v) { return +v[1]; }); })
]);

var linesGroup = graph
    .append("svg:g")
        .attr("class", "lines");

var linedata;
for (var i in data) {
    linedata = data[i];
    linesGroup
        .append("path")
            .attr("d", lineFunction(linedata.data))
            .attr("class", "line")
            .attr("fill", "none")
            .attr("stroke", function(d, i) {
                console.log(linedata.color);
                return linedata.color;
            });
};