Question

我正在尝试使用来自不同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; })
      });
}

Answer 1

即使对于需要更新的现有组，您也要添加新元素。请改为选择并更新现有元素。

例如，而不是

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

DO

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

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

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

1 个答案: