Javascript 在鼠标滚轮上的D3中缩放和平移不起作用

我已经用D3创建了一个多折线图。画完线后，我在鼠标事件上添加了缩放和平移功能。我面临的问题是，X轴正在重新缩放，但数据正在丢失，并且无法沿X轴正确缩放。我想，我犯了一些愚蠢的错误。任何帮助都将不胜感激

if（！window.lineChart）window.lineChart={}
var xAxisForAllChart={}；
var xAxisData={}
var yAxisTest={}
//你好测试
折线图=函数（图形容器）{
//设置图形的尺寸和边距
var保证金=graphContainer.margin，
padding=graphContainer.padding，
宽度=graphContainer.size.width-margin.left-margin.right，
高度=graphContainer.size.height-40；
//将列表转换为数组
variableslist=graphContainer.graphVariableList.split（“，”）；
var$this=''；
//将日期变量添加到数组中
可变列表推送（“日期”）；
var lineChartType=graphContainer.containerDisplayType；
if（typeof（lineChartType）==“未定义”）{
lineChartType=‘二次型’；
}
var typeOfLineChart={“quadratic”：d3.curveStep，“split”：d3.curveLinear，“scatter”：d3.curveLinear，“default”：d3.curveStep}；
var y2AxisVariablesList=graphContainer.y2LineVariableData；
for（graphContainer.y2LineVariableData中的变量键）{
这个['y2'+键]=d3.scaleLinear（）
.domain（[y2AxisVariablesList[key].min，y2AxisVariablesList[key].max]）
.范围（[高度，11]）；
此['valueline'+键]=''；
宽度=宽度；
padding.right=padding.right+40；
}
$this=这个；
//设定范围
var x=d3.scaleUtc（）.range（[0，width]）；
//存储以供synchline进一步操作
xAxisForAllChart[graphContainer.id]=x；
//用于缩放和平移
var data=graphContainer.data
var xExtent=d3.extent（数据，函数（d，i）{返回d.Date；}）；
var x2=d3.scaleUtc（）.range（[width，0]）；
var xOrigScale=d3.scaleUtc（）
.domain（[新日期（xExtent[0]），新日期（xExtent[1]））
.范围（[0，宽度]）；
var xScale=xOrigScale.copy（）；
变量y=d3.scaleLinear（）
.domain（[graphContainer.yAxisData.y1Data.min，graphContainer.yAxisData.y1Data.max]）
.范围（[高度，11]）；
变量line2=''；
变量line1=''；
变量y2Lines=''；
var路径={}；
变量行={}；
key（线型图的类型）.forEach（函数（daCurve）{
if（daCurve==线形图表类型）{
line1=d3.line（）.curve（线型图表的类型[lineChartType]）
.x（函数（d）{
返回x（Date.parse（d.Date））；
})
.y（函数（d）{
var line1GraphVariableIdValue=parseFloat（d[this[“graphVariableId”]”）；
if（isNaN（line1GraphVariableIdValue））{
返回y（graphContainer.yAxisData.y1Data.min）；
}else if（line1GraphVariableIdValue