d3.js - 仅选择使用 d3.js 更新元素

Question

有d3.js join没有办法只选择与“输入”元素分开的“更新”元素？

updateAndEnter = d3.selectAll('element').data(data);

entering = updateAndEnter.enter();

exiting = updateAndEnter.exit();

updatingOnly = ??;

Answer 1

是的，数据连接之后的选择包含“仅更新”元素。在附加到 enter() 选择之后，它将被扩展以包括输入元素。

请参阅一般更新模式：

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = svg.selectAll("text")
      .data(data);

  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("x", function(d, i) { return i * 32; })
      .attr("dy", ".35em");

  // ENTER + UPDATE
  // Appending to the enter selection expands the update selection to include
  // entering elements; so, operations on the update selection after appending to
  // the enter selection will apply to both entering and updating nodes.
  text.text(function(d) { return d; });

  // EXIT
  // Remove old elements as needed.
  text.exit().remove();

Answer 2

这是我的荣幸

对我来说（也是）这有点令人困惑：似乎唯一可用的设置实际上是 ENTER+UPDATE（混合在一起）和 EXIT。

但是，如果我想工作或至少只识别更新的元素怎么办？我编写了一个非常简单的函数（接下来，只需将其包装在基本 html 页面末尾的脚本标记中）显示了这个简单的难题：如何突出显示更新的元素？只有 ENTER 和 EXIT 似乎反应“正确”

要测试它，只需输入 chrome 控制台：

manage_p(['append','a few','paragraph'])
manage_p(['append','a few','new','paragraph'])
manage_p(['append','paragraphs'])

我可以得到绿色或红色突出显示，我不能得到白色

也许我们缺少 D3Js 规范？

最好的问候，法布里齐奥

function join_p(dataSet) {

var el = d3.select('body');
var join = el
.selectAll('p')
.data(dataSet);

join.enter().append('p').style('background-color','white');

join.style('background-color','green').text(function(d) { return d; });

join.exit().text('eliminato').style('background-color','red');
}