'D3 Update scaleBand axis and line

I'm new using D3JS and I've been trying to show on a graph coefficients (as dots) from regressions with their confidence interval (as a line), having the name of the coefficients on the y-axis.

I've implemented a dropdown menu to change the regression for which I want to display the coefficients. From one regression to another, the number of coefficient might not be the same therefore I also want to update the y-axis at the same time.

For the moment, my code displays the default chart well but when I switch to another regression, the lines (i.e., confidence intervals) are not displayed. Furthermore, when I then switch back to the default regression while 2 coefficients have their lines, the third one hasn't.

This is where I initiate the variables:

var allCountries = d3.map(data, function(d){return(d.country);}).keys();

// Give name of coefficients as y-line    
var allCoef = d3.map(data, function(d){return(d.coefficient_name);}).keys();

var y = d3.scaleBand()
      .range([ height, 0 ])
      .padding(.4);


var yaxis = svg.append("g")
  .attr("class", "y axis");

And this is the update function

function updateGraph(selectedGroup) {
      // Filter the data
  var filterData = data.filter(function(d){return d.country==selectedGroup;})

  y.domain(filterData.map(function(d) { return d.coefficient_name; }));
    // Create variables
    var dots = svg.selectAll('circle')
      .data(filterData);
    var ci = svg.selectAll('line')
      .data(filterData);

  yaxis
    .transition()
      .duration(500)
    .call(d3.axisLeft(y).tickSize(0)).select(".domain").remove();

      // Update variables
      dots
        .enter()
        .append('circle')
        .merge(dots)
        .transition()
        .duration(1000)
          .attr("cx", function(d) { return((d.coefficient_value)*50) ;}) // Update x position with coef value
          .attr("cy", function(d) { return(y(d.coefficient_name) + y.bandwidth()/2 );})
          .attr("r", 10 )
          .style("fill", "#69b3a2");

    ci
        .enter()
        .append('line')
        .merge(ci)
        .transition()
        .duration(1000)
          .attr("x1", function(d) { return(d.coefficient_value*50-1.95*d.coefficient_se*25);}) // Update x position with coef value
          .attr("x2", function(d) { return(d.coefficient_value*50+1.95*d.coefficient_se*25);}) // Update x position with coef value
          .attr("y1", function(d, i) { return(y(d.coefficient_name) + y.bandwidth()/2 );})
          .attr("y2", function(d) { return(y(d.coefficient_name) + y.bandwidth()/2 );})
          .attr("stroke", "black")
          .style("width", 40);

      // If less coefficients in the new dataset, we delete the ones we don't use anymore
      dots
        .exit()
        .remove();

      ci
        .exit()
        .remove();
  }

Finally this is how my data look like

country,independent_var,coefficient_name,coefficient_value,coefficient_se
US,indep_var1,female,2,0.5
US,indep_var1,income,3,0.2
US,indep_var1,status,3,0.2
Australia,indep_var1,female,5,0.2


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source