Javascript 数据源更改时，d3图形在DOM上重复

我正在尝试用D3创建一个折线图。数据源将根据用户操作进行更新

 <svg class="line-chart"></svg>


DataSource.watch("pdg2", (data) => {


function drawChart(data) {
var svgWidth = 800, svgHeight = 400;
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;

var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.date)})
    .y(function(d) { return y(d.value)})
    x.domain(d3.extent(data, function(d) { return d.date }));
    y.domain(d3.extent(data, function(d) { return d.value }));

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .select(".domain")
    .remove();

g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", -45)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("ALLOC_GAS_VOL_MMCF");

g.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);
}

drawChart(data);

});

DataSource.watch（“pdg2”，（数据）=>{
功能图（数据）{
var svgWidth=800，svgHeight=400；
var-margin={顶部：20，右侧：20，底部：30，左侧：50}；
var width=svgWidth-margin.left-margin.right；
变量高度=SVGHIGHT-margin.top-margin.bottom；
var svg=d3。选择（'svg'）
.attr（“宽度”，svgWidth）
.attr（“高度”，svgHeight）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleTime（）
.rangeRound（[0，宽度]）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var line=d3.line（）
.x（函数（d）{返回x（d.date）}）
.y（函数（d）{返回y（d.value）}）
x、 域（d3.extent（数据，函数（d）{返回d.date}））；
y、 域（d3.extent（数据，函数（d）{返回d.value}））；
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.select（“.domain”）
.remove（）；
g、 附加（“g”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，-45）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.text（“ALLOC_GAS_VOL_MMCF”）；
g、 附加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，1.5）
.attr（“d”，行）；
}
图纸（数据）；
});

当数据源更改时，它会在上一个图形上复制相同的图形。我想知道是否有一种方法来检查轴之前，它推到图形

---

谢谢

只需在函数图的开头添加一行即可。它将删除svg中的所有元素

d3.选择全部（“svg>*”）.remove（）

我已经向你展示了你需要写作的地方

功能图（数据）{
d3.选择全部（“svg>*”）.remove（）；

非常感谢@Jasdeep Singh