Question

我正在尝试使用D3.js构建一种实时图形。代码位于https://plnkr.co/edit/hrawv8CTBIsJf2QWTBMb?p=preview。

源数据表示来自不同组织的用户身份验证结果。对于每个组织，都有名称，ok计数和失败计数。该图应该基于数据动态地（使循环中的数据）更新。

代码基于https://bl.ocks.org/mbostock/3808234。

我遇到的问题很少，而且我不确定。

退出功能仅根据数据更新选择红条：

  // JOIN new data with old elements
  // specify function for data matching - correct?
  var boxes = svg.selectAll(".box").data(data, function(d) {
    return d.inst_name;
  });

  // EXIT old elements not present in new data
  // this works somehow strange
  // it does select all red boxes
  boxes.exit().transition(t).remove();

为什么exit（）只选择红条而不是全部？从我的理解，d3文档exit（）应该只选择没有任何新数据的元素。在无限循环和常量数据文件的情况下，不应该是所有条形码吗？

这显然打破了图表（参见plunker）。我需要退出才能选择仅在数据文件中不可用的条形图。见下面的例子。

数据文件的初始状态：

inst_name,ok,fail
inst1,24,-1
inst2,23,-3
...

更新了数据文件的状态：

inst_name,ok,fail
inst1,26,-1
inst14,22,-4
...

更新数据时，应删除初始状态下inst2的条形图（蓝色和红色）（并由inst14的数据替换）。为什么这不起作用？

我读过，新数据与旧的使用索引相匹配。我已经指定应该使用inst_name：

  var boxes = svg.selectAll(".box").data(data, function(d) {
    return d.inst_name;
  });

这是否必要（我在插入数据时到处使用过它？）

此外，删除元素的过渡也不起作用。有什么问题？

我还不确定在添加新栏时是否需要指定数据：

  var boxes = svg.selectAll(".box").data(data, function(d) {
    return d.inst_name;
  });

  .....

  // add new element in new data
  svg.selectAll(".blue")
    .data(data, function(d) {  // is this necessary ?
      return d.inst_name;
    }) // use function for new data matching against inst_name, necessary? 
    .enter().append("rect")
    .transition(t)
    .attr("class", function(d) {
      return "blue box "
    })
    .attr("x", function(d) {
      return x(d.inst_name);
    })
    .attr("width", x.bandwidth())
    .attr("y", function(d) {
      return y(d.ok);
    })
    .attr("height", function(d) {
      return height - y(d.ok + min);
    })

感谢您的帮助。

修改

底层数据会被脚本更改（这在原始帖子中没有明确写出），因此它可以独立于图形状态进行更改。数据应该只会增长。

Answer 1

你问了很多问题。

为什么exit（）只选择红条而不是全部？从我的理解，d3文档exit（）应该只选择没有任何新数据的元素。在无限循环和常量数据文件的情况下，不应该是所有条形码吗？

首先，构建两组条形图（蓝色[ok]和红色[fail]）。当您对数据进行数据绑定时，您可以为它们提供相同的key function，here通过inst_name标识它们。然后，您可以进行数据更新，现在可以使用以下方法选择所有条形码：

 svg.selectAll(".box")

您再次使用相同的键功能进行数据绑定。您的数据在数组中有10个值，但您只选择了20个柱。第二个10条退出（红色的），因为d3它们不在你的10个数据点中

更新数据时，应删除初始状态下inst2的条形图（蓝色和红色）（并由inst14的数据替换）。为什么这不起作用？

我没有看到你的掠夺者，你一遍又一遍地给它相同的数据。

此外，删除元素的过渡也不起作用。有什么问题？

你还没有做过任何事情。它将运行它，然后在最后删除rects。你需要的东西是它的过渡，比如＆＃34; height＆＃34;：

boxes.exit().transition(t).attr('height', 0).remove();

这会将它们缩小到0高度。

那么我们如何清理您的代码呢？

首先，我会对g元素进行操作，每个元素与数据数组中的项目配对。然后，将两个条放在属于该数据点的g中。看看Reference，我已经开始清理你的代码了（虽然不完整，但希望它可以帮助你）。

D3退出选择错误的数据

1 个答案: