Question

我从d3.js开始并构建了一个简单的堆积图表。

现在我希望能够在点击时使用新数据集更新图表。

我遵循了教程，特别是Thinking with Joins文章，General Update Pattern示例和此stackoverflow question，但我没有设法应用输入/更新/退出我的榜样的逻辑。

正如您在此fiddle中所看到的，更新的轴位于上一个轴的顶部，图表不会使用新数据进行更新。

private void PrepareForegroundNFCHandling()
{

var tagDetected = new IntentFilter(NfcAdapter.ActionTagDiscovered);
var ndefDetected = new IntentFilter(NfcAdapter.ActionNdefDiscovered);

nfcIntentFiltersArray = new[] { ndefDetected, tagDetected};

var intent = new Intent(this, GetType()).AddFlags(ActivityFlags.SingleTop | ActivityFlags.BroughtToFront);
nfcPendingIntent = PendingIntent.GetActivity(this, 0, intent, 0);

nfcAdapter = NfcAdapter.GetDefaultAdapter(Application.ApplicationContext);            
}

您能否解释在哪里插入退出以及为什么？

非常感谢

Answer 1

总结输入/更新/退出逻辑;

首次创建svg时，enter部分将获取新节点并将其附加到svg。

当您更新svg时，select部分会更新您的数据和样式。如您所知，exit部分会删除数据。

所以根据这个，你的模式几乎是正确的，但当你select你的新数据（更新）时，你没有更新你的风格。

以下是您需要更改的部分：

var rect = layer.selectAll("rect")
            .data(function (d) {
                return d;
            }).attr("x", function (d) {
                    return x(d.x);
                })
                .attr("y", function (d) {
                    return y(d.y + d.y0);
                })
                .attr("height", function (d) {
                    return y(d.y0) - y(d.y + d.y0);
                })
                .attr("width", x.rangeBand());

这是更新的小提琴：https://jsfiddle.net/8gp8x89c/2/

请注意，轴'仍然存在，因此您可以删除并重新附加它们，也可以将更新模式应用于它们。我把那部分留给你了。

d3.js - 使用新数据集更新堆积条形图

1 个答案: