0

我正在尝试掌握一些 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() 函数时缺少的东西有关？

4

1 回答 1

0

在一些友好的帮助下，我发现区别在于 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() 函数无关。

于 2017-01-27T10:29:43.650 回答