D3.js堆叠条形图选择

我试图掌握一些D3的概念，但感觉在我的知识中似乎有一些基本的差距。这似乎与D3 stack（）函数的工作方式有关

我试图理解为什么以下两个代码段不等价。第一个可以工作并填充数据，第二个不能

第一（工作代码，简化）：

第二（不工作，简化）：

基本上，我只是尝试分解代码以使其（对我来说）更易于阅读，并允许我实现exit（）函数。但是，当我执行上述操作时，图形无法显示

我认为gBar变量应该保持它们以前的选择

---

任何帮助都将不胜感激，我已成功地将此模式用于简单图表，因此我怀疑这与我在使用d3.stacked（）函数嵌套数据时缺少的内容有关？

在一些友好的帮助下，我发现差异在于v4处理选择的方式。答案是使用合并来组合各种选择，然后在合并节点上执行任何组合更新

例如：

希望这能帮助其他对此感到困惑的人。我花了一点时间才明白发生了什么，但多亏了一些聪明人，他们让我走上了正确的道路：-）

---

注：我的问题最终与stack（）函数无关。

您的问题中遗漏了一些关键代码：

gBars

如何在

之后使用…

？这里还有什么工作要做？这是最重要的部分！您好，它只是向选择项添加一些属性。例如：apprend（“g”）.attr（“fill”、“ff0000”）

var mainStack = d3.stack().keys(keys);
var seriesData = mainStack(dataset[0]);

gBars = g.selectAll("g")
         .data(seriesData, function (d, i) { return (i); })
         .enter().append("g").. more work here

var mainStack = d3.stack().keys(keys);
var seriesData = mainStack(dataset[0]);

gBars = g.selectAll("g")
         .data(seriesData, function (d, i) { return (i); });

gBars.enter().append("g").. more work here

var mainStack = d3.stack().keys(keys);
var seriesData = mainStack(dataset[0]);

var gBarsUpdate = g.selectAll("g")
     .data(seriesData, function (d, i) { return (i); });

var gBarsEnter = gBarsUpdate.enter().append("g")

var gBars = gBarsEnter.merge(gBarsUpdate)

//now update combined with common attributes as required
gBars.attr("fill", "#ff0000"); //etc