从多个 json 文件更新 d3 包布局答案

【问题标题】：update d3 pack layout from multiple json files从多个 json 文件更新 d3 包布局
【发布时间】：2014-05-12 17:37:21
【问题描述】：

我正在尝试使用来自不同 json 文件的数据更新我的扁平圆形包布局。我改编了本教程中的代码以使用我的代码：Updating the data of a pack layout from JSON call and redrawing

当您“检查元素”时，它显示数据正在更新，但节点仍与第一个 JSON 文件相关联。我感觉这与我的 d3.json 回调“currentUrl”而不是“currentJson”有关。任何帮助将不胜感激！

这是我的 generatenewdata 代码：

var refresh = function() {


d3.json(currentUrl, function(error, root){
var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d){ return !d.children; }));
node.enter().append("g")
        .attr("class", "node")
        .on("click", getNewData)
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.exit().remove();

node.append("circle")
        .attr("r", 0)
        .on("click", getNewData)
        .transition()
        .duration(2000)
        .style("fill", function(d) { return color(d.packageName); })
        .attr("r", function(d) { return d.r; });

node.append("title")
  .text(function(d) {return "Census Tract " + d.className + " : " + format(d.value) + " " + d.packageName ; });

node.append("text")
  .style("fill", "#8fb4ae")
  .on("click", getNewData)
  .transition()
  .duration(2000)
  .attr("dy", ".3em")
  .style("text-anchor", "middle")
  .style("fill", "#000000")
  .text(function(d) { return d.className.substring(0, d.r/3); });

node.append("text")
  .style("fill", "#8fb4ae")
  .on("click", getNewData)
  .transition()
  .duration(2000)
  .attr("y", 500)
  .attr("x", 800)
  .attr("class", "year label")
  .style("fill", "#000000")
  .text(function(d) { if  ( !d.children) {return d.name ; } else { return ("hi") ; };  });

node.transition()
    .duration(2000)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.select("circle")
    .attr("r", 0)
    .on("click", getNewData)
    .transition()
    .duration(2000)
    .style("fill", function(d) { return color(d.packageName); })
    .attr("r", function(d) { return d.r; })
      });
}

【问题讨论】：

您正在为需要更新的现有组添加新元素。而是选择并更新现有元素。
@LarsKotthoff 这有帮助。谢谢！！！！

标签： javascript json d3.js circle-pack

【解决方案1】：

即使对于需要更新的现有组，您也正在添加新元素。而是选择并更新现有元素。

例如代替

node.append("circle")
    // set attributes

做

node.enter().append("g")
    // ...
    .append("circle);

node.select("circle")
   // set attributes

【讨论】：