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

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

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

D3.js堆积条形图选择

1 个答案: