Javascript D3重新生成（重新加载/重新初始化）可协作树

我正在使用D3.js绘制一棵树，这棵树基于json文件。 例如，有两个json文件：a.json和b.json。单击a.json时，绘制a.json的树，单击时绘制b.json的树。 a.json文件中有4个节点，b.json文件中有10个节点。 问题是，当我先单击a.json，然后单击b.json时，前4个节点（a.json的节点）将保留（不会消失），而b.json的左6个节点将显示出来。 如果我先单击b.json，然后单击a.json，那么树将只减少6个节点，节点文本将不会更改为a.json的文本

$("body").on("click",".hash_name",function(){ 
  var hs = $(this).attr('id');
  var repo_path = $("#repo_path").val();
  var file_name = $(this).attr('name');
  $("#file_name").val(file_name);
  var file_path = repo_path+'/'+file_name;
  $.post('../../admini/feature_matrix/git_operation.php',
    {
        hs:hs,
        repo_path:repo_path,
        type:5
    },
    function (output){
        $('#source_feature_content').html(JSON.stringify(output));
        root    = output;
        root.x0 = height / 2;
        root.y0 = 0;

        function collapse(d) {
          if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
          }
        }

        root.children.forEach(collapse);
        update(root);
    },"json");
});
var margin = {top: 10, right: 20, bottom: 20, left: 80},
width = 1024 - margin.right - margin.left,
height = 900 - margin.top - margin.bottom;

var i = 0,
    duration = 300,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; }); // change to vertical

var svg = d3.select("#feature_tree").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

function update(source) {
  // Recompute the new height
  var levelWidth = [1];
  var childCount = function(level, n) {
    if(n.children && n.children.length > 0) {
      if(levelWidth.length <= level + 1) levelWidth.push(0);

      levelWidth[level+1] += n.children.length;
      n.children.forEach(function(d) {
        childCount(level + 1, d);
      });
    }
  };
  childCount(0, root);  
  var newHeight = d3.max(levelWidth) * 50; // 50 pixels per line  
  tree = tree.size([newHeight, width]);

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180;});

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });      // change to vertical

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })  // change to vertical
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});  
      })
      .remove();

  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
   update(d);
}

$（“body”）。在（“click”，“.hash_name”，function（）{
var hs=$（this.attr（'id'）；
var repo_path=$（“#repo_path”）.val（）；
var file_name=$（this.attr（'name'）；
$（“#文件名”）.val（文件名）；
var file_path=repo_path+'/'+文件名；
$.post（'../../admini/feature_matrix/git_operation.php'，
{
协:协,，
回购路径：回购路径，
类型：5
},
功能（输出）{
$（'#source_feature_content'）.html（JSON.stringify（output））；
根=输出；
root.x0=高度/2；
root.y0=0；
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童。forEach（崩溃）；
d、 children=null；
}
}
根。子。forEach（塌陷）；
更新（根）；
}“json”）；
});
var margin={顶部：10，右侧：20，底部：20，左侧：80}，
宽度=1024-margin.right-margin.left，
高度=900-边距.顶部-边距.底部；
var i=0，
持续时间=300，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.y，d.x]；}）；//改为垂直
var svg=d3。选择（“特征树”）。追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.选择（self.frameElement）.style（“高度”，“800px”）；
函数更新（源）{
//重新计算新高度
var levelWidth=[1]；
var childCount=函数（级别，n）{
如果（n.children&&n.children.length>0）{
如果（levelWidth.length），看起来您已经有了执行所需操作的代码。您能解释一下它是如何不适合您的吗？修复了，我添加了一个新函数“并添加了d3.select（“svg”）.remove（）”并移动了边距、I、tree、diagonal、svg和d3。在“Click”事件下选择，它工作正常