使用D3.js在csv文件中进行数据更新后，堆积条形图不会更新

Question

see the fiddle我使用d3.js创建了一个垂直堆积条形图，数据也在csv文件中。

但是现在我想在更新csv文件时更新我的​​条形图。

所以问题是：图表根据旧的csv数据绘制列。

这是代码。

            var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 560 - margin.left - margin.right,
            height =500 - margin.top - margin.bottom;
            var x0 = d3.scale.ordinal()
            .rangeRoundBands([0, width], 0.1);


            var x1 = d3.scale.ordinal();


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

    ## X axis ##
           var xAxis = d3.svg.axis()
            .scale(x0)
            .orient("bottom");

    ## Y Axis ##
            var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickFormat(d3.format(".1s"));


        ## Set Colors to Column ##
            var color = d3.scale.ordinal()
            .range(["#98abc5", "#8a89a6", "#55B473", "#A15543", "#E4E86F", "#d0743c", "#ff8c00"]);


            var svg = d3.select("body").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 + ")"); 
            var yBegin; 
        ## columns i want to display as  Bars##
    ![enter image description here][2]
            var innerColumns = {
            "column1": ["totalCount"],
            "column2": ["pass", "fail", "Warning", "InProgress"]

        }


           ##here i pass the csv file path##
##So I want if my Data.csv file gets Update Chart should be Update...##

            var csvfile ="../../Content/Data/data.csv";
            d3.csv(csvfile.toString(), function (error, data) {
            var columnHeaders = d3.keys(data[0]).filter(function (key) { return key !== "State"; });


             color.domain(d3.keys(data[0]).filter(function (key) { return key !== "State"; }));
          data.forEach(function(d) {
            var yColumn = new Array();
            d.columnDetails = columnHeaders.map(function(name) {
              for (ic in innerColumns) {
                if($.inArray(name, innerColumns[ic]) >= 0){
                  if (!yColumn[ic]){
                    yColumn[ic] = 0;
                  }
                  yBegin = yColumn[ic];
                  yColumn[ic] += +d[name];
                  return {name: name, column: ic, yBegin: yBegin, yEnd: +d[name] + yBegin,};
                }
              }
            });



             d.total = d3.max(d.columnDetails, function(d) { 
              return d.yEnd; 
            });
          });




          x0.domain(data.map(function(d) { return d.State; }));
          x1.domain(d3.keys(innerColumns)).rangeRoundBands([0, x0.rangeBand()]);

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


         ##X -Axis ##

             svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis);


        ## appnd Y Axis ##

            svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".7em")
                  .style("text-anchor", "end")
                  .text("");






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




            project_stackedbar.selectAll("rect")
                  .data(function(d) { return d.columnDetails; })
                .enter().append("rect")
                  .attr("width", x1.rangeBand())
                  .attr("x", function(d) { 
                    return x1(d.column);
                     })
                  .attr("y", function(d) { 
                    return y(d.yEnd); 
                  })
                  .attr("height", function(d) { 
                    return y(d.yBegin) - y(d.yEnd); 
                  })
                  .style("fill", function(d) { return color(d.name); });

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

    ## Appending Columns ##


    //For Adding Legend

              legend.append("rect")
                  .attr("x", width -8)
                  .attr("width", 18)
                  .attr("height", 18)
                  .style("fill", color);


    ## for scaling ##


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

            });