Javascript 如何更新d3.js堆叠面积图？

我在d3.js中构建了一个堆积面积图，我想更新数据在点击按钮时的显示方式——显示绝对数、相对数，并将数据显示为轮廓。 我已经解决了如何用我的数据创建这三种格式，但是当我更新图表时，它会重新绘制，而不是更新堆叠区域。我看不出我做错了什么。如果有人能帮忙，我将不胜感激

我的代码如下，也可以在此Plunker中查看：

身体{
字体：12px无衬线；
}
.轴线路径，
.轴线{
填充：无；
中风：无；
形状渲染：边缘清晰；
}
.浏览器文本{
文本锚定：结束；
}
数
百分比
轮廓
var select2=d3.selectAll（“.chartTypeRadio”）
.on（“更改”，函数（）{
let type=$（“输入[type='radio'][name='ctype']：选中”）.val（）；
console.log（'type'，type）
图表类型（750型）
})
var margin={top:50，right:0，bottom:30，left:50}，
宽度=740-边距.左-边距.右，
高度=400-margin.top-margin.bottom；
var parseDate=d3.timeParse（“%m/%d/%Y”）；
var formatSi=d3.format（“.3s”）；
var formatNumber=d3.format（“.1f”），
Format1000=函数（x）{返回formatNumber（x/1e3）；}；
var x=d3.scaleTime（）
.范围（[0，宽度]）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var color=d3.scaleOrdinal（）
。域名（[“18至25”、“26至34”、“35至39”、“40至44”、“45及以上”]）
.范围（[“EF4136”、“56423E”、“BEA6A1”、“00A0AA”、“006976”）
var xAxis=d3.axisBottom（x）.ticks（5）
var yAxis=d3.轴左（y）
var area=d3.area（）
.x（功能（d）{
返回x（数据日期）；
})
.y0（函数（d）{返回y（d[0]）；}）
.y1（函数（d）{返回y（d[1]）；}）；
var stack=d3.stack（）
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
图表类型（'Number'，750）
功能图表类型（类型、速度）{
console.log（'type'，type）
d3.csv（'data.csv'，函数（错误，数据）{
域（d3.keys（数据[0]）.filter（函数（键）{returnkey！='date'；}））；
var keys=data.columns.filter（函数（键）{return key！='date'；}）
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
});
var maxDateVal=d3.max（数据，函数（d）{
var VAL=d3.keys（d）.map（函数（键）{return key！=“date”？d[key]：0}）；
返回d3.总和（VAL）；
});
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，maxDateVal]）
如果（类型=‘百分比’）{
y、 域（[0，1]）
}
else if（类型==“剪影”）{
y、 域（[-maxDateVal/2，maxDateVal/2]）
}
堆栈。键（键）；
stack.order（d3.stackOrderNone）；
堆栈偏移（d3.stackOffsetNone）；
如果（类型=‘百分比’）{
堆栈偏移量（d3.stackOffsetExpand）；
}
else if（类型==“剪影”）{
堆栈偏移（d3堆栈偏移轮廓）
}
var segments=svg.append（'g'）.attr（'class'，'segments'））
var段=段。选择全部（'路径'）
.数据（堆栈（数据））
段。输入（）
.append（'路径'）
.attr（'类'，'段'）
.合并（分部）；
segments.selectAll（“.segment”）
.transition（）.duration（850）.ease（d3.easeCubicInOut）
.attr（'d'，区域）
.style（'fill'，函数（d）{返回颜色（d.key）；}）；
segment.exit（）.remove（）；
svg.selectAll（“.axis”）.remove（）；
append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0'，+height+'））
.呼叫（xAxis）；
append（'g'）
.attr（'class'，'y轴'）
.呼叫（yAxis）；
var legend=svg.selectAll（“.legend”）
.数据（堆栈（数据））
.输入（）
.附加（“g”）
.attr（“类”、“图例”）
.attr（“转换”、“转换”（+（0）+>，“+-40+”）；
图例。追加（“rect”）
.attr（“x”，函数（d，i）{return 100*i；}）
.attr（“y”，0）
.attr（“宽度”，10）
.attr（“高度”，10）
.style（'fill'，函数（d）{返回颜色（d.key）；}）
图例。追加（“文本”）
.attr（“dx”，“1.15em”）
.attr（“x”，函数（d，i）{return 100*i；}）
.attr（“y”，10）
.文本（功能（d）{
返回d键
})
});
}

每次您选择其他类型的图表时，都会重新创建您的

分段

组

替换：

var segments = svg.append('g').attr('class', 'segments')

与：

---

看到它在工作。

非常感谢！很乐意帮忙：）

var segments = svg.append('g').attr('class', 'segments')

var segments = svg.select('g.segments');
if (!segments.node())
  segments = svg.append('g').attr('class', 'segments')