score:2

The accepted answer is not correct (removing elements before updating a D3 dataviz is definitely not the idiomatic way to do it) and, what's more, it doesn't explain why your exit selection was not working.

Your problem is just that you're selecting a class in your update selection...

var bars = g.selectAll(".bars")
    //etc...

... but you never set that class in the enter selection. Therefore, just do:

bars = bars.enter()
    .append("rect")
    .attr("class", "bars")

Also, you have other problems:

  1. You never change the update selection. Pay attention to the merge() in my code below;
  2. You're changing the domain of the band scale. So, the width of each bar depends on the number of bars. I have a feeling that this is not what you want. If that's correct, refactor that part of the code. In my snippet below I'm using a simple paddingOuter math to change the width of the bars.

Here is your code with those changes:

var topicData = [{
    "name": "Vehicle - Poor",
    "value": 5
  },
  {
    "name": "Problems - Unresolved",
    "value": 3
  },
  {
    "name": "Reliability - Poor",
    "value": 2
  }
];

var margin = {
  top: 10,
  right: 10,
  bottom: 100,
  left: 200
}
var width = 1000 - margin.left - margin.right,
  height = 700 - margin.top - margin.bottom;

var svg = d3.select("#graphic_two").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var time = 0;
var data;

// Set the X Label
var xLabel = g.append("text")
  .attr("class", "x label")
  .attr("y", height + 50)
  .attr("x", width / 2)
  .attr("font-size", "15px")
  .attr("text-anchor", "middle")
  .text("Topic Count");

// Set the Y Label
var yLabel = g.append("text")
  .attr("class", "y axisLabel")
  .attr("transform", "rotate(-90)")
  .attr("y", -(120))
  .attr("x", -350)
  .attr("font-size", "15px")
  .attr("text-anchor", "middle")
  .text("Topic Names")

// Scales
var x = d3.scaleLinear().range([0, width]);

var y = d3.scaleBand()
  .range([height, 0]);
// X-axis
var xAxisCall = d3.axisBottom()
var xAxis = g.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")");

// Y-axis
var yAxisCall = d3.axisLeft()
var yAxis = g.append("g")
  .attr("class", "y axis");

//console.log(data);
formattedData = topicData;
update(formattedData)

$("#survey")
  .on("change", function() {
    update(formattedData);
  })

function step() {
  // At the end of our data, loop back
  time = (time < 214) ? time + 1 : 0
  update(formattedData);
}

function update(data) {

  var survey = $("#survey").val();
  var data = data.filter(function(d) {
    if (survey == "all") {
      return true;
    } else {
      return d.name == survey;
    }
  })

  // X Scale
  x.domain([0, d3.max(data, function(d) {
    return d.value;
  })]);

  y.domain(data.map(function(d) {
      return d.name;
    }))
    .paddingOuter(1 / data.length);

  // Update axes
  xAxisCall.scale(x);
  xAxis.transition().call(xAxisCall);
  yAxisCall.scale(y);
  yAxis.transition().call(yAxisCall);

  // JOIN new data with old elements
  var bars = g.selectAll(".bars").data(data, function(d) {
    return d.name;
  });

  // EXIT old elements not present in new data.
  bars.exit()
    .attr("class", "exit")
    .remove();


  // ENTER new elements present in new data.
  bars = bars.enter()
    .append("rect")
    .attr("class", "bars")
    .merge(bars)
    .attr("width", function(d) {
      return x(d.value);
    }) // Width corresponds with the value from the data
    .attr("y", function(d) {
      return y(d.name);
    }) // Maps the name to the bar
    .attr("height", y.bandwidth())
    .attr("fill", "grey")
    .on("mouseover", function() {
      d3.select(this)
        .attr("fill", "blue");
    })
    .on("mouseout", function(d, i) {
      d3.select(this)
        .attr("fill", "grey");
    })
    .on('click', function click(element) {
      selection = element.name;
      url = "http://127.0.0.1:5000/table"
      window.location = url;
      window.localStorage.setItem("topic", selection)
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<select id="survey" data-placeholder="Select..." class="chosen-select" style="width:350px;" tabindex="3">
  <option selected value="all">All</option>
  <option value="Vehicle - Poor">Vehicle - Poor</option>
  <option value="Problems - Unresolved">Problems - Unresolved</option>
  <option value="Reliability - Poor">Reliability - Poor</option>
</select>


<div class="col-md-12">
  <div id="graphic_two"></div>
</div>

PS: do not mix jQuery and D3. That's not only unnecessary but also harmful sometimes.


Related Query