D3.js 更新面积图

我有一个面积图，我想纳入一个更新模式，这样我就可以看到图实时更新。我已经能够用条形图做到这一点，但面积图将更适合我最终拥有的数据点数量

下面是我最好的尝试。更新过程分为四个部分，分别用于两个行选择和两个区域选择。这对我来说似乎令人费解，但这是我唯一能让事情看起来有效的方法。问题是，当我添加数据时，图形在浏览器中很快开始表现得很差，这向我暗示我做错了什么。此外，元素不透明度的显示方式与早期的静态图形不同，在添加新数据之前出现的图形部分在添加新数据后会缩小为一个微小的尖峰

将更新模式合并到按日期排序的面积图中的正确方法是什么

//////////////////////////////////////////////////
//初始数据
//////////////////////////////////////////////////
var tdata=[
{
“属性”：“湿度”，
“日期”：“2016-06-28 05:47:10”，
“值”：40，“单位”：“\%”
},
{
“属性”：“湿度”，
“日期”：“2016-06-28 05:47:20”，
“值”：35，“单位”：“\%”
},
{
“属性”：“湿度”，
“日期”：“2016-06-28 05:47:30”，
“值”：36，“单位”：“\%”
} ,
{
“属性”：“湿度”，
“日期”：“2016-06-28 05:47:40”，
“值”：40，“单位”：“\%”
},
{
“属性”：“温度”，
“日期”：“2016-06-28 05:47:15”，
“值”：75，“单位”：“F”
} ,
{
“属性”：“温度”，
“日期”：“2016-06-28 05:47:25”，
“值”：70，“单位”：“F”
} ,
{
“属性”：“温度”，
“日期”：“2016-06-28 05:47:35”，
“值”：72，“单位”：“F”
},
{
“属性”：“温度”，
“日期”：“2016-06-28 05:47:45”，
“值”：75，“单位”：“F”
} , 
];
///////////////////////////////////////////////////////// 
//d3代码：
/////////////////////////////////////////////////////////
var canvas=d3.选择（“#disp”）
.append（'svg'）
.attr（'width'，1200）
.attr（'height'，200）；
var x=d3.标度.线性（）范围（[0700]）；
变量y=d3.scale.linear（）
.domain（[01100]）
.范围（[200,0]）；
var line=d3.svg.line（）
//.插入（“基数”）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d值）；
});
var area=d3.svg.area（）
//.插入（“基数”）
.x（line.x（））
.y1（第.y（）行）
.y0（y（0））；
var parseDate=d3.time.format（“%Y-%m-%d%H:%m:%S”）.parse；
var lines=canvas.selectAll（'path'）；
////////////////////更新功能：
函数更新（数据集）{
//解析新的日期字符串
dataset.forEach（函数（d）{
if（typeof（d.date）==“string”）{d.date=parseDate（d.date）；}
});
//按日期排序
dataset=dataset.sort（sortByDateAscending）；
//更新域
x、 域（d3.extent（数据集，函数（d）{returnd.date；}））；
//（1）进行温度线选择、更新
lines=canvas.selectAll（'.tline'）.data（数据集）；
线
.attr（'class'，'tline'）
.attr（“d”，函数（d）{
返回行（dataset.filter（函数（d）{returnd.property=='temperature'}））；
})
.style（“笔划”，函数（d）{返回'black'；}）；
//将新数据附加到所选内容
线
.enter（）.append（“路径”）
.attr（'class'，'tline'）
.attr（“d”，函数（d）{
返回行（dataset.filter（函数（d）{returnd.property=='temperature'}））；
})
.样式（“笔划”，功能（d）{
返回“黑色”；
});
//除去
line.exit（）.remove（）；
//（2）进行温度区域选择、更新
lines=canvas.selectAll（'.tarea'）.data（数据集）；
线
.attr（“类”、“tarea”）
.style（'填充'，'红色'）
.style（'opacity'，'0.3'）
.attr（“d”，函数（d）{
返回区域（dataset.filter（函数（d）{returnd.property=='temperature'}））；
});
//将新数据附加到所选内容
线
.enter（）.append（“路径”）
.attr（“类”、“tarea”）
.style（'填充'，'红色'）
.style（'opacity'，'0.3'）
.attr（“d”，函数（d）{
返回区域（dataset.filter（函数（d）{returnd.property=='temperature'}））；
});
//除去
line.exit（）.remove（）；
//（3）进行湿度线选择、更新
lines=canvas.selectAll（'.hline'）.data（数据集）；
线
.attr（'class'，'hline'）
.attr（“d”，函数（d）{
返回行（dataset.filter（函数（d）{returnd.property=='湿度'}））；
})
.style（“笔划”，函数（d）{返回'black'；}）；
//将新数据附加到所选内容
线
.enter（）.append（“路径”）
.attr（'class'，'hline'）
.attr（“d”，函数（d）{
返回行（dataset.filter（函数（d）{returnd.property=='湿度'}））；
})
.样式（“笔划”，功能（d）{
返回“黑色”；
});
//除去
line.exit（）.remove（）；
//（4）进行湿度区域选择、更新
lines=canvas.selectAll（'.harea'）.data（数据集）；
线
.attr（“类”、“harea”）
.style（'fill'、'steelblue'）
.style（'opacity'，'0.3'）
.attr（“d”，函数（d）{
返回区域（dataset.filter（函数（d）{returnd.property=='湿度'}））；
});
//将新数据附加到所选内容
线
.enter（）.append（“路径”）
.attr（“类”、“harea”）
.style（'fill'、'steelblue'）
.style（'opacity'，'0.3'）
.attr（“d”，函数（d）{
返回区域（dataset.filter（函数（d）{returnd.property=='湿度'}））；
});
//除去
line.exit（）.remove（）；
}
函数sortByDateAscending（a，b）{
返回日期.parse（a.Date）-Date.parse（b.Date）；
};
//////////////////////////////////////////////////////////////
//主要代码：
//////////////////////////////////////////////////////////////
addObjs（tdata）
addObjs（tdata）
addObjs（tdata）
addObjs（tdata）
addObjs（td）