D3.js D3-更新图案和y轴

我这里有一场闪电战-

这是一个D3图表和角度应用程序

这是一个有两组条形图的条形图，条形图有开始和结束位置

我有水平网格线

我正在使用常规更新模式在exmaple中更新数据时重新绘制条形图。我正在更改单击btn的日期

我的问题我认为y域/轴没有正确更新，因此更新的条不正确

旧的yaxis不会被移除，并且在顶部添加了一个新的轴

更新数据时如何删除旧轴

private drawUpdate(data){
    this.createAxis();
    this.x.domain(data.map((d: any) => {
            return d.phase
        }));

        this.x1.domain(data.map((d: any) => {
            return d.phase
        }));

        this.getExtent(data);

        this.y.domain(d3.extent(this.values));

    this.chart.append("g")
      .classed('y-axis', true)
      .call(this.y_axis)
      .selectAll('text')
      .attr('dy', '-3');

    this.chart.append("g")
      .call(this.x_axis)
      .classed('x-axis', true)
      .attr("transform", "translate(0," + this.height + ")")

    const bar = this.chart.selectAll(".bar")
      .data(data)

      ///Enter
      bar.enter()
      .append("rect")
        .attr('class', (d, i) => {
          return i % 2 ? 'bar-1' : 'bar-2'
        })

        .classed('bar', true)

        .attr("x", (d, i) => {
          return i % 2 ? this.x(d.phase)+(Math.abs(this.x1.bandwidth()-this.x.bandwidth())/2) : this.x(d.phase)
        })

        .attr("width", (d, i) => {
          return i % 2 ? this.x1.bandwidth() : this.x.bandwidth()
        })
        .attr("y", (d, i) => {
          if(d.start < d.finish){
            return this.y(d.finish);
          }else{
            return this.y(d.start);
          }
        })
        .attr("height", (d, i) => {
          if(d.start < d.finish){
            return this.y(d.start) - this.y(d.finish);
          }else{
            return this.y(d.finish) - this.y(d.start);
          }
        });

      //Update
        bar.attr("x", (d, i) => {
          return i % 2 ? this.x(d.phase)+(Math.abs(this.x1.bandwidth()-this.x.bandwidth())/2) : this.x(d.phase)
        })

        .attr("width", (d, i) => {
          return i % 2 ? this.x1.bandwidth() : this.x.bandwidth()
        })
        .attr("y", (d, i) => {
          if(d.start < d.finish){
            return this.y(d.finish);
          }else{
            return this.y(d.start);
          }
        })
        .attr("height", (d, i) => {
          if(d.start < d.finish){
            return this.y(d.start) - this.y(d.finish);
          }else{
            return this.y(d.finish) - this.y(d.start);
          }
        });

        //Exit
        bar.exit()
                .remove();  

  }

在更新函数外部为y轴创建g元素

在更新中

g_y_axis.call(yaxis);

为什么在update函数中有那么多代码重复

---

将其全部放在一个函数中，并用一个选择调用它来更新选择。

我认为您所说的代码重复是我认为通用更新模式的更新部分