D3.js 堆积条形图选择答案

【问题标题】：D3.js Stacked Bar Chart SelectsD3.js 堆积条形图选择
【发布时间】：2017-01-20 21:39:52
【问题描述】：

我正在尝试掌握一些 D3 概念，但感觉在我的知识中似乎存在一些基础知识空白。它似乎与 D3 stack() 函数的工作原理有关。

我试图理解为什么以下两个代码 sn-ps 是不等效的。第一个工作并填充数据，第二个不工作。

首先（工作代码，简化）：

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() 函数时遗漏的东西有关？

【问题讨论】：

您在问题中遗漏了一些关键代码：在您的... 之后如何使用gBars？ more work here 是什么？这是最重要的部分！
嗨，它只是为选择的项目添加了一些属性。例如：.apprend("g").attr("fill","#ff0000")

标签： d3.js stackedbarseries

【解决方案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

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

ps。我的问题最终与 stack() 函数无关。

【讨论】：