score:0

So there are three problems with your code:

  1. You're appending a new layersBarArea every time you update
  2. You're appending new layersBar every time you update
  3. You're not using the correct update pattern for the bars

You need to use the update pattern every time you draw anything if you want smooth transitions. Otherwise you have to select and delete before you append again.

The general update pattern for d3 v4 is (and there are a few ways to do this, this is simply what I found to be simplest/ most effective):

var circles = d3.selectAll(".circleClass").data(data);

circles.enter()
  .append("circle")
  .merge(circles)
  .attr("class", "circleClass")
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .attr("r", 20)
  .attr("fill", "#fff")

circles.exit().remove();

The corrected portion of the code is below:

 async draw() {
        this.layersBarArea = this.svg.selectAll('.layers')
                              .data([null]);

        var layersBarAreaUpdate = this.layersBarArea
            .enter()
            .append('g')
            .merge(this.layersBarArea)
            .attr('class','layers');

        this.layersBarArea.exit().remove();

        var color_scale = this.color_scale;
        var height = this.hght;
        var tooltip = this.tooltip;
        var filteredCountsData = await this.filterData();


        var t = d3.transition()
            .duration(2000);

        var max_value = d3.max(filteredCountsData, function(d : any) {
            return +d.met;
        });

        var x_scale = this.x_scale
        .domain(filteredCountsData.map(function(d) {
            return d.category;
        }));

        this.tooltip = d3.select(".screen-display").append("div")   
          .attr("class", "tooltip")             
          .style("opacity", 0);

        //*** */
        var y_scale = this.y_scale
            .domain([0, +d3.max(this.stackedSeries, function(d:any) {
              return d3.max(d, (d:any)=>{
                return d[1]
              })
            })])
          // .domain([0, max_value]);

        var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];

        this.color_scale.domain([0, max_value]);

        //***** 
        this.layersBar = layersBarAreaUpdate.selectAll('.layer')
          .data(this.stackedSeries)

        this.layersBar.enter()
          .append('g')
          .merge(this.layersBar)
          .classed('layer',true)
          .attr('class', 'layer')
          .style('fill', (d:any, i:any)=>{
            return this.colors[i]
          });

        this.layersBar.exit().remove();

        // // var bars = this.svg.selectAll('.bar')
        // //     .data(filteredCountsData);

        // bars
        //     .exit()
        //     .remove();


        // Draw legend
        var legend = this.svg.selectAll(".legend")
          .data(colors)
          .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

        var bars = d3.selectAll('.layer')
            .selectAll('.bar')
            .data((d:any)=>{
              return d;
            });

        bars.enter()
            .append('rect')
            .merge(bars)
            .attr('class', 'bar')
            .attr('y', (d:any)=>{
              return this.y_scale(d[1])
            })
            .attr('x', (d:any, i:any)=>{
              return this.x_scale(d.data.category)
            })
            .attr('height', (d:any, i:any)=>{
              return this.y_scale(d[0]) - this.y_scale(d[1]);
            })
            .attr('width', x_scale.bandwidth())
            .on("mouseover", function(d) {
                const coordinates = [d3.event.pageX, d3.event.pageY]        
                tooltip.transition()        
                    .duration(200)      
                    .style("opacity", .9)
                    .style("left", ((coordinates[0] + 25) + "px"))
                    .style("top", ((coordinates[1] - 50) + "px"));          
                tooltip.html("<b>Completed: </b>" + d.data.category )       
                })                  
            .on("mouseout", function(d) {       
                tooltip.transition()        
                    .duration(500)      
                    .style("opacity", 0);   
            });

        bars.exit().remove();

        this.svg.select('.x.axis')
            .transition(t)
            .call(this.x_axis);

        this.svg.select('.y.axis')
            .transition(t)
            .call(this.y_axis); // @ts-ignore
    }

Related Query