javascript - 添加圆圈到包布局

Question

过去两周我一直被这个问题困扰。我一直在浏览有关更新包布局和类似内容的所有 StackOverflow 问题，并且阅读了有关它和更新模式的 d3js 文档，但它们都没有解决这个问题，而且我真的无法在不添加新元素的情况下将新元素添加到包布局中重画一切。

演示:http://jsfiddle.net/v74qp3a7/1/

var diameter = 300;

// The layout I'm using now
var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .value(function(d) { return 1 });

// The basic container
var svg = d3.select("body").append("svg")
  .attr("width", diameter)
  .attr("height", diameter)
  .append("g")
  .attr("transform", "translate(2,2)");

// My initial data source
var data = {
  name: "Languages",
  children: [{
    name: "Functional",
    children: [
      { name: "OCaml" },
      { name: "Haskell" },
      { name: "Erlang" }
    ]
  }, {
    name: "Imperative",
    children: [
      { name: "BASIC" },
      { name: "Clipper" }
    ]
  }]
};


// The node basis
var node = svg.datum(data).selectAll(".node")
  .data(pack.nodes)
  .enter().append("circle")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })
  .attr("r", function(d) {
    return d.r;
  });

function addToRoot(obj) {
  // Modify the current data object
  data.children.push(obj);

  // I try to modify by entering the node and applying a transition
  svg.datum(data).selectAll(".node")
    .data(pack.nodes)
    .enter().append("circle")
    .transition()
    .duration(500)
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("r", function(d) {
      return d.r;
    });
}

d3.select(self.frameElement).style("height", diameter + "px");

我读到了进入和退出，但我不知道如何更新数据对象 (不是数据属性，这很简单)。我一直在尝试使用这三种更新模式，但没有得到任何结果。

当我调用 addToRoot({ name: "foo"}) 时，如何添加一个简单元素并更新图形界面而不重绘所有内容？

Answer 1

首先，您的选择器依赖于您从未分配给相关圈子的类。因此，您的选择将始终为空，只需再次添加所有内容即可。其次，您还需要处理更新选择，而不仅仅是输入选择。

var sel = svg.datum(data).selectAll(".node")
  .data(pack.nodes);

sel.enter().append("circle")
  .classed("node", true);
sel
  .transition()
  .duration(500)
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })
  .attr("r", function(d) {
    return d.r;
  });

完整演示 here .