Javascript D3退出选择错误的数据

我正在尝试使用D3.js构建一种实时图形。有关代码，请访问

源数据表示来自不同组织的用户身份验证结果。每个组织都有一个名称、ok计数和fail计数。图形应该根据数据动态更新（在循环中获取数据）

代码基于

没有什么问题，也没有什么事情我不确定

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

  // 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
...

数据文件的更新状态：

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

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

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

我已经读到，新数据通过索引与旧数据进行匹配。我已指定应使用inst_名称：

  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);
    })

谢谢你的帮助

编辑

---

底层数据是通过脚本更改的（这在原始文章中没有写清楚），因此它可以独立于图形状态进行更改。数据应该只是在增长。

你问了很多问题

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

首先，构建两组条形图（蓝色[ok]和红色[fail]）。当您绑定这些数据时，您会给它们相同的名称，这通过

inst\u name

来标识它们。然后执行数据更新，现在可以使用以下命令一次选择所有条形图：

 svg.selectAll(".box")

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

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

我看不出在你的Plunk中，你一遍又一遍地给它相同的数据

此外，用于删除图元的转换也不起作用。有什么问题

你还没有给过渡做任何事情。它将运行它，然后在最后删除矩形。您需要的是它的过渡，如“高度”：

这会将它们收缩到0高度

---

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

首先，我将对

g

元素进行操作，每个元素与数据数组中的一个项配对。然后将属于该数据点的两个条放置在

g

中。看一看，我已经开始清理您的代码（虽然不完整，但希望它能让您继续工作）。

更新后正常工作。我已将失败数据更改为正。我仍然不知道为什么第144行和145行不适用。必须使用红色和第150行和151行。也有助于