Question

我正在尝试使用常规模式更新我的包布局但尚未成功。以下是我的小提琴。因此，当单击Randomize Data时，数据应该更新。

这是我的完整fiddle。

function update() {
    root = d3.hierarchy(data)
      .sum(function(d) {
        return d.size;
      })
      .sort(function(a, b) {
        return b.value - a.value;
      });

    var node = g.selectAll(".node")
      .data(pack(root).descendants())
      .enter().append("g")
      .attr("class", function(d) {
        return d.children ? "node" : "leaf node";
      })
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      });

    node.append("title")
      .text(function(d) {
        return d.data.name + "\n" + format(d.value);
      });

    node.append("circle")
      .attr("r", function(d) {
        return d.r;
      });

    node.filter(function(d) {
      return !d.children;
    }).append("text")
      .attr("dy", "0.3em")
      .text(function(d) {
        return d.data.name.substring(0, d.r / 3);
      });
}

Answer 1

您的代码只有“输入”选项。您错过了“更新”选择（并最终选择了“退出”）。

“更新”选择可以是这样的：

var nodeUpdate = g.selectAll(".node")
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });;

var circleUpdate = nodeUpdate.select("circle")
    .attr("r", function(d) {
        return d.r;
    });

检查小提琴：https://jsfiddle.net/or7pLnjp/

D3 V4包装布局的常规更新模式

1 个答案: