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

More Query from same tag