Обновление составной столбчатой ​​диаграммы d3 с несколькими наборами данных

Question

Я создал гистограмму с накоплением в d3 с помощью ползунка. Я хочу использовать этот ползунок для переключения различных наборов данных (.csv). Каждый CSV-файл называется следующим образом: "cf _" + cost + "_ ma_1_pi_1_bh_1.csv". Переменная 'cost' - это результат работы ползунка с шагом 0,5 в диапазоне от 0,5 до 3. Переключение между различными наборами данных работает с кодом ниже, но я хочу, чтобы гистограмма обновлялась сразу после переключения ползунка. Я знаю, что мне нужно использовать функции d3 (выйти, войти, удалить), но я не могу заставить его работать. Надеюсь, кто-нибудь может мне помочь!

var margin = {top: 20, right: 20, bottom: 240, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .range(["#2F8FCC", "#FD2925", "#A6DA78", "#9059B7"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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

d3.csv("cf_"+ costs +"_ma_1_pi_1_bh_1.csv", function(error, data) {
  if (error) throw error;
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

  data.forEach(function(d) {
    var mystate = d.State; //add to stock code
    var y0 = 0;
    //d.factors = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.factors = color.domain().map(function(name) { return {mystate:mystate, name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.factors[d.factors.length - 1].y1;

  });

  data.sort(function(a, b) { return b.total - a.total; });


  x.domain(data.map(function(d) { return d.State; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
         .call(xAxis)
    .selectAll("text")
     .attr("y", 0)
    .attr("x", 9  )
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");
    
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
      //.text("Population");

  var state = svg.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + "0" + ",0)"; });
      //.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; })

  state.selectAll("rect")
      .data(function(d) {
        return d.factors; 
      })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("x",function(d) { //add to stock code
          return x(d.mystate)
        })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .attr("class", function(d) {
        classLabel = d.name.replace(/\s/g, ''); //remove spaces
        return "class" + classLabel;
      })
      .style("fill", function(d) { return color(d.name); });

  state.selectAll("rect")

       .on("mouseover", function(d){
       
          var delta = d.y1 - d.y0;
          var xPos = parseFloat(d3.select(this).attr("x"));
          var yPos = parseFloat(d3.select(this).attr("y"));
          var height = parseFloat(d3.select(this).attr("height"))

          d3.select(this).attr("stroke","blue").attr("stroke-width",0.2);

          svg.append("text")
          .attr("x",xPos)
          .attr("y",yPos +height/2)
          .attr("class","tooltip")
          .text(d.name +": "+ delta); 
          
       })
 
       .on("mouseout",function(){
          svg.select(".tooltip").remove();
          d3.select(this).attr("stroke","pink").attr("stroke-width",0.2);
                                
        })


  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  //reverse order to match order in which bars are stacked    

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color)
      .attr("id", function (d, i) {
        return "id" + d.replace(/\s/g, '');
      })
      

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

<!DOCTYPE html>
<meta charset="utf-8">
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.min.js"></script>
<body>
    Cost and Financials
<div id="slider" class="slidecontainer">
    <input type="range" min=".5" max="3" value="1" step=".5" id="myRange" name="CostRange">
    <p>Weight Multiplier: <span id="costs"></span></p>
  <script>
var slider = document.getElementById("myRange");
var output = document.getElementById("costs");
costs = output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>
</div>
<div id="barchart">
<script type="text/javascript" src= "stackedclickable5.js" ></script>
</script>
</div>
</body>     

Вот два моих файла .csv

cf_1_ma_1_pi_1_bh_1.csv:

State,Cost and Financials,Multi-actor Complexity,Physical Interdependencies,Behavior Lighting switch incandescent to LED (residential),1,0,0,1 Cars full hybrid,2,0,0,1 Air Transport,1,1,2,1 Agronomy Practices,1,1,2,1 Cropland nutrient management,0,3,1,2 Clinker substition by fly ash,0,3,2,1 Grassland management,0,3,1,2 PV panels homes,3,1,1,2 Composting new waste,2,3,2,1 Energy efficiency 1 Iron & steel,4,1,2,1 Cars plug-in hybrid,2,3,1,3 Buidling Efficiency New Build,4,2,1,2 Residential appliances,3,2,2,3 Electricity from landfill gas,4,4,1,1 Battery Electric Vehicles,3,3,1,4 Small hydro,5,3,3,2 Nuclear,6,5,2,2 Bioethanol lignocellulosic,4,3,4,3 Geothermal,6,5,3,2 High penetration wind,5,5,4,2 Reduced intensive agriculture conversion,4,5,4,3 Reduced deforestation from timber harvesting,4,5,4,3 Coal CCS new build,6,5,4,3 Coal CCS retrofit,6,5,6,5

cf_2_ma_1_pi_1_bh_1.csv

State,Cost and Financials,Multi-actor Complexity,Physical Interdependencies,Behavior Lighting switch incandescent to LED (residential),2,0,0,1 Cars full hybrid,4,0,0,1 Air Transport,2,1,2,1 Agronomy Practices,2,1,2,1 Cropland nutrient management,0,3,1,2 Clinker substition by fly ash,0,3,2,1 Grassland management,0,3,1,2 PV panels homes,6,1,1,2 Composting new waste,4,3,2,1 Energy efficiency 1 Iron & steel,8,1,2,1 Cars plug-in hybrid,4,3,1,3 Buidling Efficiency New Build,8,2,1,2 Residential appliances,6,2,2,3 Electricity from landfill gas,8,4,1,1 Battery Electric Vehicles,6,3,1,4 Small hydro,10,3,3,2 Nuclear,12,5,2,2 Bioethanol lignocellulosic,8,3,4,3 Geothermal,12,5,3,2 High penetration wind,10,5,4,2 Reduced intensive agriculture conversion,8,5,4,3 Reduced deforestation from timber harvesting,8,5,4,3 Coal CCS new build,12,5,4,3 Coal CCS retrofit,12,5,6,5