Javascript D3.js使用新数据时如何更新图表

如何用新数据更新图表？我有一个图表显示两个日期之间的价格范围。然后我添加了两个日期选择器来定义日期。当我选择新日期并更新图表时，它会将新图表覆盖在旧图表上。如何删除旧数据并用新数据显示图表？我刚开始使用d3，但仍然不知道如何更新它

import React，{Component}来自“React”
从“d3”导入*作为d3
从“反应日期选择器”导入日期选择器
导入“react datepicker/dist/react datepicker.css”
从“时刻”导入时刻
导入“/App.css”
类应用程序扩展组件{
状态={
数据：空，
起始日期：新日期（“2017-12-31”），
结束日期：新日期（“2018-04-01”），
isDateChanged:false，
}
异步getData（）{
const{startDate，endDate}=this.state
让startTime=时刻（startDate）。格式（“YYYY-MM-DD”）
设endTime=时刻（endDate）.格式（“YYYY-MM-DD”）
试一试{
const response=等待获取(
`https://api.coindesk.com/v1/bpi/historical/close.json?start=${startTime}&end=${endTime}`，
)
const json=await response.json（）
this.parseData（json）
}捕获（错误）{
console.log（错误）
}
}
handleChange（日期、类型）{
如果（类型==“起始日期”）{
这是我的国家({
开始日期：，
})
}否则{
这是我的国家({
结束日期：日期，
})
}
}
解析数据（数据）{
var arr=[]
for（让我输入data.bpi）{
arr.push({
日期：新日期（i），
价格：data.bpi[i]，
})
}
这是我的国家({
数据：arr，
})
}
显示图表（数据）{
让高度=400
宽度=600
设maxDate=d3.max（数据，d=>d.date）
让minDate=d3.min（数据，d=>d.date）
让maxPrice=d3.max（data，data=>data.price）
设y=d3
.scaleLinear（）
.domain（[0，maxPrice]）
.范围（[高度，0]）
设x=d3
.scaleTime（）
.domain（[minDate，maxDate]）
.范围（[0，宽度]）
设yAxe=d3。轴左（y）
设xAxe=d3.axisBottom（x）
设svg=d3
.选择（“svg”）
.attr（“高度”、“600”）
.attr（“宽度”、“800”）
让group=svg.append（“g”）.attr（“transform”，“translate（50，50）”）
让线=d3
.第（）行
.x（d=>x（d.date））
.y（d=>y（d.price））
group.append（“path”）.attr（“d”，行（数据））
组
.附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxe）
组追加（“g”）调用（yAxe）
}
componentDidUpdate（prevProps、prevState）{
if（prevState.data！==this.state.data）{
this.displayChart（this.state.data）
}
如果（prevState.isDateChanged！==此.state.isDateChanged）{
这个文件名为getData（）
}
}
componentDidMount（）{
这个文件名为getData（）
}
render（）{
返回(
此.handleChange（日期，“开始日期”）}
/>
this.handleChange（date，“endDate”）}
/>
this.setState（{isDateChanged:true}）}>
进入
比特币价格表
)
}
}
导出默认应用程序

您可以选择

svg

的所有子项，并使用以下行删除它们：

svg.selectAll("*").remove();

将其粘贴在

displayChart

功能中：

displayChart(data) {

  ...

  let svg = d3
    .select("svg")
    .attr("height", "600")
    .attr("width", "800")

  svg.selectAll("*").remove();

  let group = svg.append("g").attr("transform", "translate( 50 , 50)")

  ...

}