1

我正在使用这个jsfiddle。我希望当我单击WeekView按钮时，它应该更改条形颜色以反映与我的图例中相同的颜色。但由于某种原因，颜色不同。

我不认为

var layer = svg.selectAll(".layer")
    .data(stack);

layer.enter()
    .append("g")
    .attr("class", "layer")
    .style("fill", function (d, i) {
    return color(i);
});

layer.exit()
    .remove();

当我切换到周视图时被调用，因此它不会用新的条替换旧条，它只是重用以前视图中的条。

如何让 d3.js 用正确的颜色替换条？

4

1 回答 1

1

确实，问题出在代码的那一部分：Demo

var layer = svg.selectAll(".layer")
    .data(stack);

layer.enter()
    .append("g")
    .attr("class", "layer");

// Set the colors in the `update` cycle, not the `enter` cycle.
layer.style("fill", function (d, i) {
    return color(i);
});

layer.exit()
    .remove();

有一段有趣的历史可以解释为什么会这样。在 D3 的早期版本中，元素的enter和update集合是分开的，就像update和exit事件仍然分开一样，即您在update集合上执行的操作不会在集合上执行，exit反之亦然。

但是，在 D3 的 2.0 版本中，决定附加在enter阶段中的任何元素也将成为update集合的一部分。enter这样做是因为元素集和元素集通常update需要对它们执行完全相同的操作（就像您的情况一样）。为了避免这种影响，您需要在阶段update之前编写enter阶段。

因此，在enter循环中，应该设置元素appended并且应该设置它们的初始属性，而应该在循环中设置它们的最终值（它们应该在静态状态下）update。

于 2013-11-13T19:28:50.180 回答