使用多个数据集更新堆叠的条形图d3

Question

我在d3中使用滑块创建了堆叠的条形图。我想使用此滑块切换不同的数据集（.csv）。每个csv文件的命名如下：“ cf _” +成本+“ _ ma_1_pi_1_bh_1.csv”。变量“ costs”是滑块的输出，步长为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