Javascript d3堆叠条形图未正确更新

我有一个使用d3创建的堆叠条形图

我正在尝试使用不同的.csv按钮更新条形图中的数据

以下是我目前的代码：

#头衔{
字体系列：衬线；
字体变体：小大写字母；
字体大小：20px；
文本对齐：左对齐；
文字装饰：下划线；
文本阴影：2px2px2px灰色；
}
身体{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：钢蓝；
}
.x轴路径{
显示：无；
}
.退出{
不透明度：0；
}
服务器/客户端与组的关系

var margin={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=1100-margin.left-margin.right，
高度=700-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
var color=d3.scale.category20（）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.csv（“before.csv”），函数（错误、数据）{
域（d3.keys（数据[0]）.filter（函数（键）{returnkey！==“Servers”}）；
data.forEach（函数（d）{
var y0=0；
d、 ages=color.domain（）.map（函数（名称）{return{name:name，y0:y0，y1:y0+=+d[name]}；}）；
d、 总计=d.ages[d.ages.length-1].y1；
});
x、 域（data.map（函数（d）{returnd.Servers；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.total；}）]；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“客户数量”）；
var servers=svg.selectAll（“.servers”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“transform”，函数（d）{return”translate（“+x（d.Servers）+”，0）”；}）；
servers.selectAll（“rect”）
.data（函数（d）{返回d.age；}）
.enter（）.append（“rect”）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.y1）；}）
.attr（“高度”，函数（d）{返回y（d.y0）-y（d.y1）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
var legend=svg.selectAll（“.legend”）
.data（color.domain（）.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*20+”）；}）；
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.text（函数（d）{return d；}）；
});
函数updateData（）{
d3.csv（“在.csv之后”，函数（错误、数据）{
域（d3.keys（数据[0]）.filter（函数（键）{returnkey！==“Servers”}）；
data.forEach（函数（d）{
var y0=0；
d、 ages=color.domain（）.map（函数（名称）{return{name:name，y0:y0，y1:y0+=+d[name]}；}）；
d、 总计=d.ages[d.ages.length-1].y1；
});
x、 域（data.map（函数（d）{returnd.Servers；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.total；}）]；
svg.select（“.x.axis”）.transition（）
.持续时间（750）
.呼叫（xAxis）；
svg.select（“.y.axis”）.transition（）
.持续时间（750）
.呼叫（yAxis）；
var servers=svg.selectAll（“.servers”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“transform”，函数（d）{return”translate（“+x（d.Servers）+”，0）”；}）；
servers.selectAll（“rect”）
.data（函数（d）{返回d.age；}）
.enter（）.append（“rect”）
.transition（）
servers.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.y1）；}）
.attr（“高度”，函数（d）{返回y（d.y0）-y（d.y1）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
});
}
函数restortdata（）{
d3.csv（“before.csv”），函数（错误、数据）{
域（d3.keys（数据[0]）.filter（函数（键）{returnkey！==“Servers”}）；
data.forEach（函数（d）{
var y0=0；
d、 ages=color.domain（）.map（函数（名称）{return{name:name，y0:y0，y1:y0+=+d[name]}；}）；
d、 总计=d.ages[d.ages.length-1].y1；
});
x、 域（data.map（函数（d）{returnd.Servers；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.total；}）]；
svg.select（“.x.axis”）.transition（）
.持续时间（750）
.呼叫（xAxis）；
svg.select（“.y.axis”）.transition（）
.持续时间（750）
.呼叫（yAxis）；
var servers=svg.selectAll（“.servers”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“transform”，函数（d）{return”translate（“+x（d.Servers）+”，0）”；}）；
servers.selectAll（“rect”）
.data（函数（d）{返回d.age；}）
.enter（）.append（“rect”）
.transition（）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.y1）；}）
.attr（“高度”，函数（d）{返回y（d.y0）-y（d.y1）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
});
}

而不是使用

正文

进行附加。添加如下内容：

<div id="chart"></div>

完成此操作后，可以使用删除内部元素

$("#chart").empty();

在

updateData

和

revertData

方法中

或者如果你是

$("#chart").empty();

d3.select("svg").remove();