changes in Join D3 goes through enter as well-CodePudding

Im trying to filter data and when I try to update the chart, the old data remains and the new Data comes on top of it. Where am I doing it wrong. It goes through Enter-update-exit everyTime I change the data! is that wrong? I thought it only should go through update.

vis.chart.selectAll(".chart")
  .data(this.compiledData)
  .join(
    enter => {
      console.log("we are in enter");
      return enter
        .append('path')
        .attr('d', d =>  this.arcGenerator(d))
        .style('fill', d => `${this.Type[d.category]}`)
        .style("opacity", 0.6)
        .style("stroke", "#333")
        .style("stroke-width", "0.5")
        .attr('transform', d => {
          let pos = this.getHorizontalPostion(d);
          return `translate(${pos[0]},${pos[1]})`;
        })

    },
    update => {
      console.log("we are in update");
      console.log(update)
      return update
      // .append('circle')
      .attr('r', 12)
      .style('fill', d => `${this.Type[d.category]}`)
      .style("opacity", 0.6)
      .style("stroke", "#333")
      .style("stroke-width", "0.5")
      .attr('transform', d => {
        let pos = this.getHorizontalPostion(d);
        return `translate(${pos[0]},${pos[1]})`;
      })
      .selection();


    },
    exit => {
      console.log("we are in exit");
      console.log(exit)
      return exit.remove();

    }
  );

CodePudding user response：