在我第一次使用库d3.js 时，我发现了一个我不知道如何解决的问题。我正在尝试表示我从同一网络服务中收到的数据<div>。它是这样工作的：
- 用户在下拉菜单中选择一个日期。
- 用户点击按钮。
- 请求服务器。
- （如果一切顺利）响应 JSON 数据。
- 在图表中表示数据
这可以在同一页面中重复多次，并且应该更新图表。
我试图在同一个 div 中表示这些图表。这是HTML：
<html>
<head></head>
<body>
<div id="featured-results">
User message I want to remove
</div>
<div id="featured-content">
</div>
</body>
</html>
这是javascript代码：
<script type="text/javascript">
function test(){
var ip = location.host;
var data = [];
var req = $.ajax({
url: 'http://...' ,
type: 'GET',
contentType: 'application/json',
cache: 'true',
success: function(response){
data = response;
}
});
$.when(req).done(function(){
var barWidth = 9;
var width = 950;
var height = 350;
var x = d3.scale.linear().domain([0, 96]).range([0, width]);
var y = d3.scale.linear().domain([0, 1000]).rangeRound([1, height - 50]);
d3.select("#featured-results").remove();
var chart = d3.select("#featured-content")
.append("svg:svg")
.attr("width", width)
.attr("height", height);
chart.selectAll("rect")
.data(data.values)
.enter()
.append("svg:rect")
.attr("x", function(datum, index){return x(index);})
.attr("y", function(datum){return height - y(datum.energy);})
.attr("height", function(datum){return y(datum.energy);})
.attr("width", barWidth)
.attr("fill", "#2d578b");
});
}
</script>
此代码删除了一个 div，我在其中向用户显示一条消息并在 <div id="featured-content">div 中表示图表，但是当我请求新图表时，新图表将附加到 div 中，然后我看到两个、三个、...
我怎样才能做到这一点？这是任何“最佳实践”吗？谢谢
更新：如果我删除所有 svg 不代表当前图表
d3.select("#featured-results").remove();
d3.selectAll("svg:svg").remove();
var chart = d3.select("#featured-content")
.append("svg:svg")
.attr("width", width)
.attr("height", height);
chart.selectAll("rect")
.data(data.values)
.enter()
.append("svg:rect")
.attr("x", function(datum, index){return x(index);})
.attr("y", function(datum){return height - y(datum.energy);})
.attr("height", function(datum){return y(datum.energy);})
.attr("width", barWidth)
.attr("fill", "#2d578b");