D3.js堆积条形图选择

Question

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

我试图理解为什么以下两个代码片段不等效。第一个有效并填充数据，第二个无效。

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

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

基本上，我

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

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

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

Answer 1

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

例如：

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

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

附言。我的问题最终与 stack（） 函数无关。