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

Question

我在d3.js和reactjs中构建了一个散点图。我有两个下拉菜单（x轴和y轴各一个）。当我更改下拉值时，它会在绘图中显示新数据以及旧数据。 圆圈和轴的文本被覆盖-请查看我的图形的图像 Image of graph

此处为我的图表代码

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>
    )
    }

我尝试了很多可用的解决方案，但是没有运气。

找到了这个http://bl.ocks.org/d3noob/7030f35b72de721622b8