带更新按钮的D3.js将新数据添加到旧数据中，而不是替换旧数据

问题描述：

我有一个更新按钮，可以将新的.csv数据加载到D3.s堆积条形图中。我的问题是，在更新它似乎是使用两个数据集，而不是仅仅是新的。我认为这与我对update和selectAll有些困惑有关，但我一直无法弄清楚如何替换而不是追加。这里是我当前的代码：带更新按钮的D3.js将新数据添加到旧数据中，而不是替换旧数据

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.bar { 
    fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

</style> 

<body> 
<!-- <label><input type="checkbox"> Sort values</label> --> 
<div id="option"> 
    <input name="updateButton" 
      type="button" 
      value="Update" 
      onclick="updateData()" /> 
</div> 

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 20, right: 20, bottom: 200, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 650 - 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(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

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("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 + ")"); 

d3.csv("FinalData4.csv", function(error, data) { 
     color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; })); 

     data.forEach(function(d) { 
     var y0 = 0; 
     d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
     d.total = d.ages[d.ages.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; })]); 

    // x-axis label 
    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
      .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", ".15em") 
       .attr("transform", function(d) { 
        return "rotate(-65)" 
        }); 

    // y-axis label  
     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("USD in Millions"); 

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

     state.selectAll("rect") 
      .data(function(d) { return d.ages; }) 
     .enter().append("rect") 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.y1); }) 
      .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
      .style("fill", function(d) { return color(d.name); }); 

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

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

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

}); 

// ** Update data section (Called from the onclick) 
function updateData() { 


// Get the data again 
d3.csv("FinalData2015.csv", function(error, data2) { 
     color.domain(d3.keys(data2[0]).filter(function(key) { return key !== "State"; })); 

     data2.forEach(function(d) { 
     var y0 = 0; 
     d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
     d.total = d.ages[d.ages.length - 1].y1; 
     }); 

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


     var tran = d3.select("body").transition(); 

     // change x-axis label 
     tran.select(".x.axis") 
      .duration(1000) 
      .call(xAxis) 
      .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", ".15em") 
       .attr("transform", function(d) { 
        return "rotate(-65)" 
        }); 

     // change the y-axis label  
     tran.select(".y.axis") 
      .duration(1000) 
      .call(yAxis); 

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

     var test = state.selectAll("rect") 
      .data(function(d) { return d.ages; }) 
      .enter().append("rect") 
      .transition() 
      .duration(1000) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.y1); }) 
      .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
      .style("fill", function(d) { return color(d.name); }); 

    }); 
} 
</script> 
</body>

更新：我改变了functionUpdateData（）代码，我有什么目前，因为我意识到它在那里有一些垃圾。新的代码有x和y轴标签的工作过渡，但仍然是上面用实际条形图描述的相同问题。

您需要处理更新和退出的选择，以及。见例如[本教程]（http://bost.ocks.org/mike/circles/）。 – 2014-12-07 20:16:45

我读了你包含的链接，并最终找到了更新和退出有用的解释：[链接]（http://bost.ocks.org/mike/join/），但阅读它说，处理更新选择意味着使用.data，我认为我正在做，并退出它的.enter，我也在更新函数中调用它。很确定我错过了一些明显的东西，但是我真的在挠挠我的脑袋，尤其是现在我已经在上面修改后的代码中正确更新了我的y和x轴。 – hyssop 2014-12-08 17:59:09

您可能需要在'.data（）'的第二个参数中提供一个关键函数，它告诉D3如何匹配现有数据和传递的数据。默认情况下，这是通过索引完成的（即第一个数据与选择中的第一个元素相匹配，等等），这可能不是你想要的。 – 2014-12-08 18:18:39

答

这是因为您没有在更新功能中使用更新和退出连接（请仔细阅读此文章http://bost.ocks.org/mike/join/）。据我所知，你想更新现有的CSV数据，因为你需要更新当前的数据。我给你举个例子一个简单的代码：

function updateData() { 
    //this is the new data that you are binding to some circles on the canvas 
    var circle = svg.selectAll("circle").data([200, 100, 50,10,5]); 
    //if there is new data, you get those new circles with the enter() method 
    var circleEnter = circle.enter().append("circle"); 
    circleEnter.attr("cy", 60); 
    circleEnter.attr("cx", function(d, i) { return i * 100 + 30; }); 
    circleEnter.attr("r", function(d) { return Math.sqrt(d); }); 

    //------THIS IS THE PART YOU ARE MISSING------ 
    //but the circles that already exist need an update. (check there is no enter() method here) 
    circle.attr("r", function(d) { return Math.sqrt(d); }); 

    //also you need to remove the circles that don´t have a data binding. 
    circle.exit().remove(); 
}

所以我觉得在你的代码，你必须写类似：

var state = svg.selectAll(".state").data(data); 

//the update data 
state.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

谢谢你的链接和建议。我取得了一些进展，但还没有。我与这个人有同样的问题：[链接]（http://stackoverflow.com/questions/18186011/how-to-update-data-in-stack-bar-chart-in-d3）。我的新数据正在更新，但旧数据未被删除。如果我删除了enter（）。append（）行，数据不会更新。如果有帮助，他建立了一个jsfiddle [链接]（http://jsfiddle.net/9UfT2/2/）。 – hyssop 2014-12-08 17:41:51

带更新按钮的D3.js将新数据添加到旧数据中，而不是替换旧数据

相关推荐