javascript - D3.js:enter().append()后的属性未设置

Question

像大多数人一样，我正在努力解决 D3 的数据连接机制。我读过关于这个主题的每一篇文章，好的和(大部分)坏的。克里斯蒂安·贝伦斯 guest-and-chair party analogy可能是最好的，尽管我警告读者他忽略了我们大约 2/3，从“现在我们的 update() 函数执行两组不同的操作”开始——他在这里没有澄清，显然，DOM 构造(更新选择会特别忽略附加/删除)调用，而属性调用则由所有三种选择类型处理，尽管它们都无缝地出现在一个方法链中。 (就 Mike Bostock 而言，他在解释数据连接和方法链接方面做出了一些努力，从稍微居高临下到完全复杂化问题。)

我仍然无法理解 data() 和 Enter() 之间的膜，特别是何时保存变量以及给定链中的调用如何对哪些对象进行操作，以及我的变量保存哪个链返回值，以及如何保存我应该知道(显然，attr 不会影响变量，而是在包含一系列 select、data 和 Enter 的链中，返回哪个？)；因此，我对贝伦斯这篇原本很出色的文章提出了温和的批评，因为它有很大的希望。

下面，我有一个强制布局(可以是任何布局)，在启动时显示两个节点，如果单击任何节点，则应添加第三个节点。

var graph = {
  "nodes":[ {"name":"1" }, {"name":"2" } ],
  "links":[ {"source":0,"target":1} ]
}

var width = 500, height = 400;

var force = d3.layout.force()
  .size([width, height]);

var svg = d3.select("#map").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

var container = svg.append("g");

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

var link = container.append("g")
  .attr("class", "links")
  .selectAll(".link")
  .data(graph.links)
  .enter()
    .append("line")
    .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var nodes = container.append("g")
  .attr("class", "nodes");

function update() {

  var n = nodes.selectAll(".node").data(graph.nodes);

  ne = n.enter()
    .append("g")
    .attr("class", "node")
    .attr("cx", function(d) { return d.x; })  // sets on initial enter() but not on click
    .attr("cy", function(d) { return d.y; }); // sets on initial enter() but not on click

  ne.append("rect")
    .attr("width", "20")
    .attr("height", "20")
    .attr("fill", "red");

    return n;

} // end update()

var node = update();

force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });
  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

node.on("click", function(d) {
  graph.nodes.push({ "name":"3" });
  update();
}); // end .on("click")

我跟随 Behrens 做了一个 update() 函数来节省成本。设置 cx 和 cy 最初工作正常，但当您单击节点时则不然。新节点停留在[0,0]。我认为我管理 update() 参数和返回的方式一定有问题。一种更好的方法来做到这一点，一种真正有效的方法？

Answer 1

你只是错过了两件小事。首先，您需要重新启动强制布局，以便更新节点位置，并且需要更新您在 tick 处理函数中使用的 node:

node.on("click", function(d) {
  graph.nodes.push({ "name":"3" });
  node = update();
  force.start();
});

完整演示 here .