Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/chart-update-1

它是Angular应用中的D3图表。

它的条形图包含两组条形图，条形图具有开始位置和结束位置。

我有水平网格线。

当数据更新时，我正在使用“常规更新模式”来重绘条形图（例如，我更改了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();  

  }

Answer 1

为y轴外部更新功能创建一个g元素。

在更新中

g_y_axis.call(yaxis);

为什么在更新功能中有所有重复的代码？

将其全部放入函数中，并通过选择进行调用以更新选择。

D3-更新样式和y轴

1 个答案: