javascript - 用完全不同的数据重新绘制图表

Question

所以事情就是这样，我正在尝试让这个例子工作 http://bl.ocks.org/mbostock/1093130所以“更新”函数(每次我在 DOM 上按下按钮时都会调用该函数)使用全新的不同数据集重新绘制图形...我对示例进行了一些修改来尝试此操作。因此，假设我想使用不同的 json 随机提供图表，这些名称存储在数组中:

var array = ["graph.json","graph2.json"];    
function reload() {
    var rnd = Math.floor(Math.random()*2);
    d3.json(array[rnd], function(error, json) {
        if (error) throw error;

        root = json;
    update();
});    
}

问题是，当重新绘制图表时，它总是有某种错误，比如属于先前数据集的某个节点，或者类似的东西......所以首先我尝试从容器中删除元素在调用 update() 之前，我在 SO 中以各种可能的方式看到了这一点，但这不起作用，所以(如果我错了，请纠正我)我读了一点，发现 data() 函数使用了一些一种连接方法，这样您就可以根据数据中注册的每个更改或类似的内容不断更新图表，这很酷，但显然不是我需要的。所以我尝试通过 datum() 更改 data() 因为我在某处读到如果您不希望动态更新布局，则应该使用最后一个，并且我删除了 Enter() 和 exit() 调用，因为我读到它们是不需要，因为数据不计算此类函数。代码可以编译但不起作用，没有绘制任何内容。这是我得到的(我只放置了 update() 函数，因为其他一切都没有改变):

function update() {
var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);

  // Restart the force layout.
force
  .nodes(nodes)
  .links(links)
  .start();

// Update links.
link = link.datum(links, function(d) { return d.target.id; });

link.insert("line", ".node")
  .attr("class", "link");

// Update nodes.
node = node.datum(nodes, function(d) { return d.id; });

var nodeEnter = node.append("g")
  .attr("class", "node")
  .on("click", click)
  .call(force.drag);

nodeEnter.append("circle")
  .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });

nodeEnter.append("text")
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });

node.select("circle")
  .style("fill", color);

}

预先感谢您的帮助。

正如您在上图中看到的，显示的数据与数据集不对应，它应该显示“Mike”、“Mike Jr.”、“Paul”等名称......正如我之前指出的，如果您尝试通过单击根节点来缩回/折叠节点，部分数据已更正(不是根节点上的数据)。

以下是应显示的数据:

//Second graph
{
 "name": "Mike",
 "children": [
  {
   "name": "Mike Jr.",
   "children": [
    {
     "name": "Paul",
     "children": [      
      {"name": "Peter", "size": 743}
     ]
    }
   ]
  }
 ]
}

Answer 1

因此，您可能缺少 D3 中的一些基础知识，即 enter、update、exit 模式。 Here's an article迈克·博斯托克 (Mike Bostock) 解释了这个主题，我在下面的帖子中添加了一张图片:

基本思想是，当你想修改你的数据时，你需要再次加入你的数据:

var circles= d3.selectAll("circle").data(nodes, function(d) { return d.id; });

然后使用相关函数来确定发生了什么变化。 D3 在后台跟踪您的数据和 HTML 元素，并找出需要更改的内容。因此，你可以这样做:

circles.enter().append("circle"); // Add circles for new items
circles.exit().remove();          // Remove old circles from the DOM as there's no data for them anymore

请注意，一旦您调用了 enter()，这些数据项就已经被移动到 update 部分 - 即已经在DOM。这意味着您现在可以执行以下操作:

circles.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })

最后我应该注意，将 key 函数传递到 .datum() 或 .data() 也很重要。我注意到您已经有了它，您几乎肯定需要将其保留在那里。