Javascript 在调整大小时重新创建D3多折线图（响应）

为了有一个响应性的D3多折线图，我添加了一个调整大小的函数，但它似乎不起作用，尽管调用了该函数：

var数据=[{
日期：“2016-10-10”，
第一:1,，
价值2:0
}, {
日期：“2016-10-17”，
估价一：23，
价值二：2
}, {
日期：“2016-10-24”，
估价一：32，
价值二：17
}, {
日期：“2016-10-31”，
估价一：57，
价值二：40
}, {
日期：“2016-11-07”，
估价一：74，
价值二：56
}];
var margin={顶部：10，右侧：50，底部：100，左侧：50}，
//设置默认宽度和高度
宽度=（window.innerWidth），
宽度=加宽器-边距.left-边距.right，
高度=500-margin.top-margin.bottom；
//确定当前大小，它决定变量
函数集_vars（）{
变量宽度=window.innerWidth-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
}
函数drawGraphic（）{
var svg=d3。选择（“#图表”）
.append（'svg'）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//解析日期以获得正确的时间格式
var formatTime=d3.timeFormat（“%Y-%m-%d”）；
data.forEach（函数（d）{
d、 日期=新日期（d.日期）
});
var valueOneData=data.map（函数（d）{
返回{
日期：d.日期，
价值：d.ValueOne
}
});
var valueTwoData=data.map（函数（d）{
返回{
日期：d.日期，
价值：d.ValueTwo
}
});
var xScale=d3.scaleTime（）
.范围（[0，宽度]）
.域（d3.范围（数据、函数（d））{
返回日期
}));
var yScale=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，函数（d））{
返回d.ValueOne
}) * 1.05]);
var lineGenerator=d3.line（）
.x（功能（d）{
返回xScale（d.date）
})
.y（功能（d）{
返回Y刻度（d值）
});
var gX=svg.append（“g”）
.attr（“transform”，`translate（0，${height}）`）
.call（d3.axisBottom（xScale）.tickFormat（函数（d）{
返回格式化时间（d）
}).dick值（data.map）函数（d）{
返回日期
})))
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“变换”、“旋转（-65）”）
.attr（“y”，4）
.attr（“x”，-10）
.attr（“dy”，“.35em”）；
var gY=svg.append（“g”）
.call（d3.axisLeft（yScale））；
var valueOneLine=svg.append（“路径”）
.数据（valueOneData）
.attr（“d”，线路生成器）
.style（“填充”、“无”）
.风格（“笔划”，“#124”）；
var valueTwoLine=svg.append（“路径”）
.数据（valueTwoData）
.attr（“d”，线路生成器）
.style（“填充”、“无”）
.风格（“笔划”，“c7003b”）；
//响应性尝试1
d3.选择（窗口）。打开（“调整大小”，调整大小）；
}
//调整大小功能
函数大小调整（）{
d3.选择（“svg”）.remove（）；
set_vars（）；
绘图（）；
log（“正在调用函数”）
}
set_vars（）；
绘图（）；
//二号反应堆
addEventListener（“resize”，function（）{d3.select（“svg”）.remove（）；set_vars（）；drawGraphic（）；}）
问题在于每次调整窗口大小时对数据的解析

由于第一次解析数据中的日期，因此每次调用
parseDate（d.date）
都会失败，因为它已经被解析为有效日期。你明白了吗

因此，移动解析代码以便只执行一次：

// parse data just once
data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
});

小提琴链接：

建议：我觉得这不是制作响应图表的正确方法，即删除SVG并将所有配置多次添加到正文中。我是这样做的：

解析数据，用初始高度和宽度附加svg，仅附加X、Y轴一次，但将
牵引杆
（绘制实际杆）移动到单独的功能，该功能将使用d3自己的输入、退出和更新选择逻辑
在调整窗口大小时，只需更改SVG的高度和宽度，通过
调用（xAxis）…
重新渲染轴，然后只需调用
牵引杆
功能
希望这有帮助。
您有没有检查控制台错误？我没有错误。是吗？真奇怪。不管怎样，马上发布答案。