Javascript 用D3更新多线图

我正在尝试使用D3，并使用COVID-19数据进行一些可视化，但我似乎不知道如何使用按钮更新多线图。这就是我目前拥有的：

.line1{
填充：无；
中风：黑眼圈；
笔划宽度：2.5px；
}
.line2{
填充：无；
笔画：红色；
笔划宽度：2.5px；
}
.line3{
填充：无；
笔画：绿色；
笔划宽度：2.5px；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.网格线{
笔画：浅灰色；
笔划不透明度：0.7；
形状渲染：边缘清晰；
}
.网格路径{
笔画宽度：0；
}
.图例矩形{
填充物：白色；
笔画：黑色；
不透明度：0.8；
}
德国确诊的冠状病毒病例总数
//在这里写下你的d3代码。。
var保证金={
前20名，
右:20,，
底数：30，
左：50
},
宽度=1000-margin.left-margin.right，
高度=600-margin.top-margin.bottom；
//解析日期/时间
var parseTime=d3.utcParse（“%Y-%m-%dT%H:%m:%S%Z”）；
var formatDate=d3.timeFormat（“%m-%d”）；
//设定范围
var x=d3.scaleUtc（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var logic=d3.scaleLog（）.range（[height，0]）；
//定义轴
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
var logyAxis=d3.axisLeft（逻辑）；
//定义第一行
var valueline1=d3
.第（）行
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.已确认）；
});
//定义第二行
var valueline2=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.死亡）；
});
//定义第三行
var valueline3=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.已恢复）；
});
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//x轴函数中的网格线
函数x_网格线（）{
返回d3.axisBottom（x）
}
//y轴函数中的网格线
函数y_网格线（）{
返回d3轴左（y）
}
//y轴函数中的网格线
函数逻辑网格线（）{
返回d3.axisLeft（逻辑）
}
d3.json(
"https://api.covid19api.com/total/dayone/country/germany"
).then（功能（数据）{
data.forEach（函数（d）{
d、 国家
d、 日期=解析时间（d.日期）；
d、 已确认=d.已确认；
d、 死亡=死亡；
d、 恢复=d.恢复；
});
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回最大值（d.已确认，d.死亡，d.恢复）；
})]);
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类别”、“第1行”）
.attr（“d”，valueline1）；
//添加valueline2路径。
追加（“路径”）
.数据（[数据]）
.attr（“类别”、“第2行”）
.attr（“d”，valueline2）；
//添加valueline3路径。
追加（“路径”）
.数据（[数据]）
.attr（“类别”、“第3行”）
.attr（“d”，valueline3）；
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//添加X网格线
svg.append（“g”）
.attr（“类”、“x网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（x_网格线（）
.1尺寸（高度）
.tick格式（“”）
)
//添加Y网格线
svg.append（“g”）
.attr（“类”、“y网格”）
.call（y_网格线（）
.1.1尺寸（-宽度）
.tick格式（“”）
)
图例=svg.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”、“翻译（50,30）”）
.style（“字体大小”，“12px”）
.呼叫（d3.图例）
});
//**更新数据部分（从onclick调用）
函数对数（）{
//再次获取数据
d3.json(
"https://api.covid19api.com/total/dayone/country/germany"
).then（功能（数据）{
data.forEach（函数（d）{
d、 国家
d、 日期=解析时间（d.日期）；
d、 confirmedlog=Math.log（d.Confirmed）；
d、 死亡日志=数学日志（d.死亡）；
d、 recoveredlog=Math.log（d.Recovered）；
});
//再次缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[0，
d3.最大值（数据、函数（d）{
返回Math.max（d.confirmedlog、d.death slog、d.recoveredlog）；
})
]);
//选择要应用更改的节
var svg=d3.select（“body”）.data（data.transition（）；
//做出改变
svg.select（“.line1”）//更改行
.持续时间（750）
.attr（“d”，函数（d）{
返回值line1（d.confirmedlog）；
})
svg.select（“.line2”）//更改行
.持续时间（750）
.attr（“d”，函数（d）{
返回值line1（d.death slog）；
});
svg.select（“.line3”）//更改行
.持续时间（750）
艾特先生
d.confirmedlog = d.Confirmed ? Math.log(d.Confirmed) : 0;
d.deathslog = d.Deaths ? Math.log(d.Deaths) : 0;
d.recoveredlog = d.Recovered ? Math.log(d.Recovered) : 0;

svg.select(".line1") // change the line
    .duration(750)
    .attr("d", function(d) {
        return valueline1.y(function(e) {
            return y(e.confirmedlog);
        })(d);
    })