径向 Reingold Tilford 树删除根节点答案

【问题标题】：Radial Reingold Tilford Tree remove root node径向 Reingold Tilford 树删除根节点
【发布时间】：2016-09-21 08:49:43
【问题描述】：

我一直在寻找一种从径向蒂尔福德树中删除根节点的方法，但到目前为止还没有运气。我发现了一个类似的问题here，但提供的答案不够具体，无法完全理解我需要在哪里使用d.depth > 0。我尝试在有意义但未成功的位置添加这行代码（例如 node.append 和 .data(nodes)）。附加的 sn-p 类似于用户@JSBob 在另一个问题中所指的位置，任何方向都会有所帮助，因为我是 D3 的新手！

function createVisualization(root){
  //if (error) throw error;
  drawLegend();
  var nodes = tree.nodes(root), 
      links = tree.links(nodes);
      console.log(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("mouseover", mouseOverArc)
      .on("mousemove", mouseMoveArc)
      .on("mouseout", mouseOutArc);

  node.append("circle").attr("r", 5)
  .style("fill", function(d) {
    if(d.size == 0) {
       return "#8c6226"; //Brown
    } else if(d.size == 1){
      return "#DC143C"; //Crimson
    } else if(d.size == 2){
      return "#FFA500"; //Orange
    } else if(d.size == 3){
      return "#32CD32"; //LimeGree
    } else if(d.size == 4){
      return "#1E90FF"; //DodgerBlue
    }
    ;})

【问题讨论】：

标签： javascript d3.js tree nodes

【解决方案1】：

@JSBOB 说的是，当你为根节点制作圆时，将其半径设置为 0，如下所示：

  node.append("circle")
    .attr("r", function(d) {
      if (d.depth == 0) {//for root node depth will be 0
        return 0;//make the circle's radius 0 for root node.
      } else {
        return 4.5;
      }
    }).style("fill", function(d) { ... });

工作样本here

【讨论】：

你也应该添加if(d.depth ==0){return ""} else return d.name;来删除标题
是的，我同意..但是@Tim 在上面 OP 提供的代码 sn-p 中没有文本部分，所以我没有提到它。

【解决方案2】：

使用：

var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .filter(function(d) { return d.source.depth != 0})
      .attr("class", "link")
      .attr("d", diagonal);

删除到根节点的链接和

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .filter(function(d) { return d.depth != 0})
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

删除根节点

查看示例：http://plnkr.co/edit/GkXtUoAvUa6nijNCERxz?p=preview

【讨论】：

啊，我不知道过滤功能。这真的很有帮助，谢谢蒂姆！后续问题，现在我正在显示所有大于 depth = 0 的节点，是否可以重新定位我的 depth = 1 节点？我尝试调整变换值，但没有成功。
要合并所有深度为1的节点？