Javascript 如何删除散点图中的旧数据并仅显示新数据

我在d3.js和reactjs中构建了一个散点图。我有两个下拉列表（x轴和yaxis各一个）。当我改变下拉值时，它会在绘图中显示新数据和旧数据。 圆和轴的文本被覆盖-请参见我的图表图像

这里是我的图形代码

componentDidUpdate(){
const graphdatanew11 = [
          {'x':1,'y':2,'row_id':0},
          {'x':12,'y':3,'row_id':1},
          {'x':3,'y':20,'row_id':2}];


const height = 400,
              width = 500,
              margins = {top: 20, right: 100, bottom: 50, left: 50};
        const xscale1 = Math.min.apply(Math,this.state.xValue.map(Number))
        const xscale2 = Math.max.apply(Math,this.state.xValue.map(Number))
        const yscale1 = Math.min.apply(Math,this.state.yValue.map(Number))
        const yscale2 = Math.max.apply(Math,this.state.yValue.map(Number))

        const chart = d3.select('.chart')
          .attr('width', width + margins.left + margins.right)
          .attr('height', height + margins.top + margins.bottom)

          .append('g')
          var yScale = d3.scaleLinear()
          .rangeRound([0,height])
          .domain([yscale2,yscale1]);
          var xScale = d3.scaleLinear()
          .rangeRound([0,width])
          .domain([xscale1,xscale2]);



 const dots = chart.selectAll('dot')
          .data(graphdatanew11)
          .enter().append('circle')
          .attr('r', 5)
          .attr('id', d => { return d["row_id"]})
          .attr('cx', d => {return xScale(d.x); })
          .attr('cy', d => {return yScale(d.y)})
          .on("click", function(d){
            console.log("row id is-", d["row_id"])

          })

          .style('fill', (d) => { return "black"

          });


chart.selectAll('text')
          .data(graphData, null, 2)
          .enter().append('text')
          .attr('transform', 'translate(10,5)');

        chart.append('g')
          .attr('transform','translate(0,' + height + ')')
          .call(d3.axisBottom(xScale));

        chart.append('g')
          .call(d3.axisLeft(yScale));

        chart.append('text')
          .style('font-size', '14px')
          .style('text-anchor', 'middle')
          .attr('x', width / 2)
          .attr('y', height + 50)
          .text('X Axis')

        chart.append('text')
          .style('font-size', '14px')
          .style('text-anchor', 'middle')
          .attr('x', height / -2)
          .attr('y', -30)
          .attr('transform', 'rotate(-90)')
          .text('Y Axis')

          chart.selectAll('circle')
          .data(graphdatanew11)
          .exit()
          .remove()
}



render(){
return(
    <React.fragment>
        <UncontrolledButtonDropdown>

                                  <DropdownToggle caret size="sm">
                                  </DropdownToggle>
                                  <DropdownMenu>
                                  {
                                     ==dropdownn1 data==
<DropdownItem onClick={this.handleChange1}>{option}</DropdownItem>
                                  }
                                  </DropdownMenu>
                            </UncontrolledButtonDropdown>
    <UncontrolledButtonDropdown>

                                  <DropdownToggle caret size="sm">
                                  </DropdownToggle>
                                  <DropdownMenu>
                                  {
                                     ==dropdwon2 data==
<DropdownItem onClick={this.handleChange2}>{option}</DropdownItem>
                                  }
                                  </DropdownMenu>
                            </UncontrolledButtonDropdown>
    </React.fragment>
    )
    }

componentDidUpdate（）{
常量图形DataNew11=[
{'x'：1，'y'：2，'row_id'：0}，
{'x'：12，'y'：3，'row_id'：1}，
{'x'：3，'y'：20，'row_id'：2}]；
常数高度=400，
宽度=500，
边距={顶部：20，右侧：100，底部：50，左侧：50}；
const xscale1=Math.min.apply（Math，this.state.xValue.map（Number））
const xscale2=Math.max.apply（Math，this.state.xValue.map（Number））
const yscale1=Math.min.apply（Math，this.state.yValue.map（Number））
const yscale2=Math.max.apply（Math，this.state.yValue.map（Number））
常量图表=d3。选择（“.chart”）
.attr（'width'，width+margins.left+margins.right）
.attr（'height'，height+margins.top+margins.bottom）
.append（'g'）
var yScale=d3.scaleLinear（）
.rangeRound（[0，高度]）
.domain（[yscale2，yscale1]）；
var xScale=d3.scaleLinear（）
.rangeRound（[0，宽度]）
.domain（[xscale1，xscale2]）；
常量点=图表。选择全部（'点'）
.数据（graphdatanew11）
.enter（）.append（'圆'）
.attr（'r'，5）
.attr（'id'，d=>{return d[“row_id”]}）
.attr（'cx'，d=>{return xScale（d.x）；}）
.attr（'cy'，d=>{return yScale（d.y）}）
.打开（“单击”，功能（d）{
log（“行id为-”，d[“行id”]）
})
.style（'fill'，（d）=>{返回“black”
});
chart.selectAll（'text'）
.数据（graphData，null，2）
.enter（）.append（'text'）
.attr（'transform'，'translate（10,5）'）；
chart.append（'g'）
.attr（'transform'，'translate（0，+height+'））
.call（d3.axisBottom（xScale））；
chart.append（'g'）
.call（d3.axisLeft（yScale））；
chart.append（'text'）
.style（'font-size'，'14px'）
.style（'text-anchor'，'middle'）
.attr（'x'，宽度/2）
.attr（'y'，高度+50）
.text（“X轴”）
chart.append（'text'）
.style（'font-size'，'14px'）
.style（'text-anchor'，'middle'）
.attr（'x'，高度/-2）
.attr（'y'，-30）
.attr（'transform'、'rotate（-90'））
.text（“Y轴”）
图表。选择全部（'圆圈'）
.数据（graphdatanew11）
.exit（）
.删除（）
}
render（）{
返回(
{
==下拉N1数据==
{option}
}
{
==dropdwon2数据==
{option}
}
)
}

我尝试了很多关于stackoverflow的可用解决方案，但没有成功

---

发现这一个

您的代码凌乱且不清楚。发布一个最小的完整的可运行示例，您的代码凌乱且不清楚。发布一个最小的完整可运行示例