Javascript D3从堆叠条形图到条形图的转换仅在第一次起作用

我试图创建两个图表，一个堆叠的条形图和一个条形图，每个图表显示不同的数据集。但是，当我点击按钮时，我想从堆叠条形图过渡到条形图，反之亦然。我编写的代码只在第一次工作时起作用，然后，当我想从条形图转换回堆叠条形图时，所有的条形图都以单个条形图的形式堆叠在一起。有人能给我指出正确的方向，如何从吧台转换回堆叠的吧台吗？任何帮助都将不胜感激。（我还没有真正弄乱轴，所以它们没有改变是正常的）

以下是指向当前外观的链接：

下面是我的代码：

var值='stack'；
风险值数据=[{
名称：“施华华公司”，
货值：1067，
中国：772
}, {
名称：“卡钦博”，
价值：283，
中国：1
}, {
名称：“Estoraque”，
价值：204，
中国：150
}, {
名称：“Cumala”，
价值：154，
中国：0
}, {
名称：“Ishpingo”，
价值：108，
中国：3
}, {
名称：“瓦伊鲁罗”，
价值：108，
中国：1
}, {
名称：“托尼洛”，
价值：61，
中国：4
}, {
名称：“康哥纳”，
价值：54，
中国：0
}, {
姓名：“卡皮罗纳”，
价值：37，
中国：5
}, {
名称：“塔胡里”，
价值：33，
中国：14
}, {
名称：“马鲁帕”，
价值：33，
中国：1
}, {
姓名：“奎尼拉”，
价值：28，
中国：4
}, {
名称：“Azucar huayo”，
价值：22，
中国：15
}, {
名称：“Protium sp.”，
价值：19，
中国：0
}, {
姓名：“诺格尔”，
价值：15，
中国：6
}, {
姓名：“安娜·卡斯皮”，
价值：14，
中国：2
}, {
姓名：“塞德罗”，
价值：14，
中国：0
}, {
名称：“加拉帕圭亚内斯”，
数值：12，
中国：0
}, {
姓名：“莱切·卡斯比”，
数值：12，
中国：0
}, {
名称：“安迪罗巴”，
价值：11，
中国：0
}, {
名称：“科帕伊巴”，
数值：7，
中国：4
}, {
姓名：“帕洛·巴斯顿”，
价值：6，
中国：0
}, {
姓名：“莫娜”，
数值：5，
中国：0
}, {
名称：“阿尔门德罗”，
数值：5，
中国：0
}, {
姓名：“Chancaquero”，
价值：4，
中国：0
}, {
姓名：“Caimitillo”，
价值：3，
中国：1
}, {
名称：“诺加尔阿马里洛”，
价值：3，
中国：0
}, {
名称：“大果库马”，
价值：3，
中国：0
}, {
姓名：“Tulpay”，
价值：3，
中国：0
}, {
名称：“卡拉帕”，
价值：3，
中国：0
}, {
名称：“橄榄泪囊”，
价值：2，
中国：0
}, {
姓名：“卡皮努里”，
价值：2，
中国：2
}, {
名称：“阿利卡斯特伦酒店”，
价值：2，
中国：0
}, {
名称：“红豆副赤霉”，
价值：2，
中国：0
}, {
名称：“Brosimum sp.”，
价值：2，
中国：0
}, {
名称：“曼奇加”，
价值：2，
中国：0
}];
//堆叠钢筋的数据
变量点=[{
“lon”：105.3，
“lat”：33.5，
‘名称’：‘中国’，
“GTF”：1024，
“ID”：“CHN”
},
{
“lon”：-70.9，
“lat”：18.8，
“姓名”：“多米尼加共和国”，
“GTF”：470，
“ID”：“DOM”
},
{
“lon”：-101，
“lat”：38，
'名称'：'美国'，
“GTF”：248，
“ID”：“美国”
},
{
“lon”：-102.5，
“lat”：22.7，
'姓名'：'墨西哥'，
“GTF”：220，
“ID”：“MEX”
},
{
“lon”：2.98，
“lat”：46，
'姓名'：'法国'，
“GTF”：85，
“ID”：“FRA”
}
];
//酒吧的数据
var保证金={
前20名，
右:30,，
底数：150，
左：60
},
宽度B=700-边距.左-边距.右，
高度b=500-margin.top-margin.bottom；
VarDataIntermediate=['value'，'china'].map（函数（键，i）{
返回数据.map（函数（d，j）{
返回{
x:d['name']，
y:d[钥匙]
};
})
})
var dataStackLayout=d3.layout.stack（）（dataIntermediate）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度B+边距。左+边距。右）
.attr（“高度”，高度B+边距.顶部+边距.底部）
var gBar=svg.append（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（'class'，'gBar'）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度b]，.2）；
变量y=d3.scale.linear（）
.范围（[heightB，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（8）
.d格式（函数（d）{
返回y.dickformat（4，d3.format（“，d”）（d）
});
data.forEach（函数（d）{
d、 value=+d.value；//强制为数字
d、 中国=+d.china；
});
x、 域（dataStackLayout[0]。映射（函数（d）{
返回d.x；
}));
y、 域（[0，d3.max（dataStackLayout[dataStackLayout.length-1]，
职能（d）{
返回d.y0+d.y；
})]).nice（）；
var层；
无功棒；
//斧头
gBar.附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（高度B+10+）”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（'font-size'，'14px'）
.style（'font-family'，'Alegreya'）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-0.40em”）
.attr（“dy”，“.10em”）
.attr（“转换”，函数（d）{
返回“旋转（-65）”
});
gBar.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.selectAll（“文本”）
.style（'font-size'，'16px'）
.style（'font-family'，'Alegreya'）；
函数绘图（）{
如果（值=='stack'）{
图层=gBar。选择全部（“.stack”）
.数据（数据集布局）；
layer.exit（）
.transition（）
.延迟（功能（d，i）{
返回30*i；
})
.持续时间（1500）
.style（“填充”、“无”）
.remove（）；
layer.enter（）.append（“g”）
.attr（“类”、“堆栈”）
.样式（“填充”，功能（d，i）{
返回i==0？'#b4d5c3'：'#ecaeb3'；
});
条形=图层。选择全部（“矩形”）
.数据（功能（d）{
返回d；
});
//“退出”设置：
条.出口（）
.transition（）
.延迟（功能（d，i）{
返回30*i；
})
.持续时间（1500）
.attr（“y”，y（0））
.attr（“高度”，高度B-y（0））
.样式（“填充不透明度”，1e-6）
.remove（）；
//“输入”设置：
bar.enter（）.append（“rect”）
.transition（）
.延迟（功能（d，i）{
返回30*i；
})
.持续时间（3000）
.attr（“x”，函数（d）{
返回x（d.x）；
x.domain(dataStackLayout[0].map(function(d) {
  return d.x;
}));

y.domain([0, d3.max(dataStackLayout[dataStackLayout.length - 1],
  function(d) {
    return d.y0 + d.y;
  })]).nice();