Question

使用d3.js join有没有办法只从“输入”元素中选择“更新”元素？

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

entering = updateAndEnter.enter();

exiting = updateAndEnter.exit();

updatingOnly = ??;

Answer 1

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

请参阅General Update Pattern：

  // 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 console：

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

我可以获得绿色或红色突出显示，但我无法获得白色

也许我们错过了D3Js的规格？

祝你好运，的Fabrizio

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

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

2 个答案: