我对带数据缺口的堆积面积图的呈现有疑问。数据源包含时间序列数据和标记为NaN的数据间隔。在下面的最小示例中，数据缺口为时间戳：
时间戳记，A，B，C，D
2018-11-26T12：00：00 + 0100,2522，NaN，NaN，397
2018-11-26T12：15：00 + 0100,2433，NaN，NaN，397
对于系列B和C。
结果图表如下图所示： chart
橙色和绿色系列的渲染与我预期的一样，但NaN值有一个缺口。但是红色系列在红色数据区域和橙色系列之间产生白色空间。并且从最后一个数据点到数据间隙内的数据点的红色笔划可见。
我认为这受插值和曲线的影响。但是有可能更改此行为，使其看起来像在chart-2中吗？
我使用绘图程序手动操作了chart-2，因此红色系列的区域在与橙色和绿色区域相同的时间戳记处结束，并且看不到数据间隙内数据点的笔划。间隙内的区域部分也没有空格。
这是示例代码： at Plunker
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 stacked area chart with data gaps</title>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<svg></svg>
<script>
var svg = d3.select("svg").attr("width", "960").attr("height", "500");
var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
var parseTimestamp = d3.timeParse("%Y-%m-%dT%H:%M:%S%Z");
var xScale = d3.scaleTime().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);
var zScale = d3.scaleOrdinal(d3.schemeCategory10);
var stack = d3.stack();
var area = d3.area()
.x(function(d,i){return xScale(d.data.date); })
.y0(function(d){return yScale(d[0]); })
.y1(function(d){return yScale(d[1]); })
.defined(function(d){return (!isNaN(d[0]) && !isNaN(d[1]))});
var chartGroup = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", type, function(error, data){
if(error) throw error;
var keys = data.columns.slice(1);
stack.keys(keys);
var stackedData = stack(data);
xScale.domain(d3.extent(data, function(d){return d.date; }));
yScale.domain([0, 16000]);
zScale.domain(keys);
var layer = chartGroup.selectAll(".layer")
.data(stackedData)
.enter().append("g")
.attr("class", "layer");
layer.append("path")
.attr("class", "area")
.style("fill", function(d){return zScale(d.key); })
.style("opacity", "0.85")
.attr("d", area);
chartGroup.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
chartGroup.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale));
});
function type(d, i , columns){
d.date = parseTimestamp(d.Timestamp);
var n = columns.length;
for(var i = 1; i < n; ++i) d[columns[i]] = Number(d[columns[i]]);
return d;
}
</script>
</body>
</html>
和数据：
Timestamp,A,B,C,D
2018-11-26T00:00:00+0100,0,9461,4173,393
2018-11-26T00:15:00+0100,0,9474,4165,393
2018-11-26T00:30:00+0100,0,9591,4112,393
2018-11-26T00:45:00+0100,0,9787,3833,393
2018-11-26T01:00:00+0100,0,9853,3928,393
2018-11-26T01:15:00+0100,0,9874,4072,393
2018-11-26T01:30:00+0100,0,10042,4022,394
2018-11-26T01:45:00+0100,0,10344,3920,394
2018-11-26T02:00:00+0100,0,10418,3957,394
2018-11-26T02:15:00+0100,0,10348,3938,394
2018-11-26T02:30:00+0100,0,10110,3892,394
2018-11-26T02:45:00+0100,0,9915,3876,394
2018-11-26T03:00:00+0100,0,10006,3857,392
2018-11-26T03:15:00+0100,0,10071,3928,392
2018-11-26T03:30:00+0100,0,10011,3984,392
2018-11-26T03:45:00+0100,0,10100,3943,392
2018-11-26T04:00:00+0100,0,10242,3781,392
2018-11-26T04:15:00+0100,0,10325,3910,392
2018-11-26T04:30:00+0100,0,10295,3940,392
2018-11-26T04:45:00+0100,0,10446,3882,392
2018-11-26T05:00:00+0100,0,10710,4046,394
2018-11-26T05:15:00+0100,0,10802,3690,394
2018-11-26T05:30:00+0100,0,11059,3603,395
2018-11-26T05:45:00+0100,0,11019,3719,395
2018-11-26T06:00:00+0100,0,11125,3676,393
2018-11-26T06:15:00+0100,0,11125,3492,393
2018-11-26T06:30:00+0100,0,11060,3679,393
2018-11-26T06:45:00+0100,0,11127,3757,394
2018-11-26T07:00:00+0100,0,11473,3449,393
2018-11-26T07:15:00+0100,0,11803,3280,393
2018-11-26T07:30:00+0100,4,11805,3281,393
2018-11-26T07:45:00+0100,26,11631,3373,393
2018-11-26T08:00:00+0100,78,11619,3315,393
2018-11-26T08:15:00+0100,180,11334,3290,393
2018-11-26T08:30:00+0100,318,11120,3420,400
2018-11-26T08:45:00+0100,477,10859,3426,400
2018-11-26T09:00:00+0100,687,10736,3369,404
2018-11-26T09:15:00+0100,936,10333,3280,404
2018-11-26T09:30:00+0100,1154,9972,3197,404
2018-11-26T09:45:00+0100,1374,9592,3131,404
2018-11-26T10:00:00+0100,1576,9081,3069,406
2018-11-26T10:15:00+0100,1796,8552,3053,393
2018-11-26T10:30:00+0100,1973,8150,3060,393
2018-11-26T10:45:00+0100,2123,7664,2957,393
2018-11-26T11:00:00+0100,2272,7253,2877,395
2018-11-26T11:15:00+0100,2403,6929,2804,395
2018-11-26T11:30:00+0100,2516,6729,2723,395
2018-11-26T11:45:00+0100,2526,6501,2572,395
2018-11-26T12:00:00+0100,2522,NaN,NaN,397
2018-11-26T12:15:00+0100,2433,NaN,NaN,397
2018-11-26T12:30:00+0100,2366,6117,2116,397
2018-11-26T12:45:00+0100,2247,6019,2009,398
2018-11-26T13:00:00+0100,2121,5949,1839,391
2018-11-26T13:15:00+0100,1944,5862,1707,392
2018-11-26T13:30:00+0100,1737,5731,1580,392
2018-11-26T13:45:00+0100,1544,5633,1418,392
2018-11-26T14:00:00+0100,1362,5608,1235,391
2018-11-26T14:15:00+0100,1120,5494,1155,391
2018-11-26T14:30:00+0100,874,5407,1102,391
2018-11-26T14:45:00+0100,654,5330,1035,402
2018-11-26T15:00:00+0100,474,5336,969,401
2018-11-26T15:15:00+0100,300,5433,1002,402
2018-11-26T15:30:00+0100,176,5564,1070,401
2018-11-26T15:45:00+0100,81,5771,1037,402
2018-11-26T16:00:00+0100,28,5955,1026,401
2018-11-26T16:15:00+0100,8,6181,1055,401
2018-11-26T16:30:00+0100,1,6312,1109,401
2018-11-26T16:45:00+0100,0,6338,1093,402
2018-11-26T17:00:00+0100,0,6514,1070,401
2018-11-26T17:15:00+0100,0,6470,1078,402
2018-11-26T17:30:00+0100,0,6488,1196,402
2018-11-26T17:45:00+0100,0,6568,1297,402
2018-11-26T18:00:00+0100,0,6637,1344,402
2018-11-26T18:15:00+0100,0,6590,1283,402
2018-11-26T18:30:00+0100,0,6560,1337,402
2018-11-26T18:45:00+0100,0,6627,1429,402
2018-11-26T19:00:00+0100,0,6584,1391,402
2018-11-26T19:15:00+0100,0,6598,1501,402
2018-11-26T19:30:00+0100,0,6578,1595,402
2018-11-26T19:45:00+0100,0,6442,1585,402
2018-11-26T20:00:00+0100,0,6236,1527,403
2018-11-26T20:15:00+0100,0,6063,1554,403
2018-11-26T20:30:00+0100,0,5824,1632,409
2018-11-26T20:45:00+0100,0,5546,1627,410
2018-11-26T21:00:00+0100,0,5364,1556,410
2018-11-26T21:15:00+0100,0,5267,1430,410
2018-11-26T21:30:00+0100,0,5178,1371,410
2018-11-26T21:45:00+0100,0,5188,1399,410
2018-11-26T22:00:00+0100,0,5058,1442,412
2018-11-26T22:15:00+0100,0,4951,1464,412
2018-11-26T22:30:00+0100,0,4835,1364,412
2018-11-26T22:45:00+0100,0,4722,1263,412
2018-11-26T23:00:00+0100,0,4598,1162,411
2018-11-26T23:15:00+0100,0,4449,1105,411
2018-11-26T23:30:00+0100,0,4329,1097,411
2018-11-26T23:45:00+0100,0,4210,1117,411
我希望我的意思很清楚。
感谢任何提示。