程序员经验分享-hwhale

选择树形布局中子节点的所有路径和父节点

2024-04-10

我正在跟进this http://bl.ocks.org/d3noob/8375092学习 d3 js 树布局的教程，我正在研究它。单击子节点时，我尝试选择所有祖先节点以及连接它们的路径。

我已经更改了默认值click教程中的函数看起来像这样。

function click(d) {
  console.log(d.parent);
    while(d.parent)
    { 
      d = d.parent;
      console.log(d.parent);
    }
}

这样就一一选择了所有的祖先节点，但是我怎样才能选择它们之间的所有连接路径呢？ 例如：如果我想为所有祖先节点和连接路径着色，我该怎么做？

var treeData = [{
  "name": "Top Level",
  "parent": "null",
  "children": [{
    "name": "Level 2: A",
    "parent": "Top Level",
    "children": [{
      "name": "Son of A",
      "parent": "Level 2: A"
    }, {
      "name": "Daughter of A",
      "parent": "Level 2: A"
    }]
  }, {
    "name": "Level 2: B",
    "parent": "Top Level"
  }]
}];


// ************** Generate the tree diagram	 *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  },
  width = 960 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;

var i = 0,
  duration = 750,
  root;

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

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

var svg = d3.select("body").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 + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

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

function update(source) {

  // 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 ? -13 : 13;
    })
    .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 + ")";
    });

  nodeUpdate.select("circle")
    .attr("r", 10)
    .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 + ")";
    })
    .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();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  console.log(d.parent);
  while (d.parent) {
    d = d.parent;
    console.log(d.parent);
  }
}
	.node {
	  cursor: pointer;
	}
	.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}
	.node text {
	  font: 12px sans-serif;
	}
	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

首先给链接路径提供 ID，如下所示：

  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("id", function(d){ return ("link" + d.source.id + "-" + d.target.id)})//unique id

然后给所有节点分配id。

nodeEnter.append("circle")
    .attr("r", 1e-6)
    .attr("id", function(d){return "node" + d.id;})//id of the node.

然后在点击函数中根据 ids 进行选择：

function click(d) {
  //reset all nodes color
  d3.selectAll("circle").style("fill", "white");//reset all node colors
  d3.selectAll("path").style("stroke", "#c3c3c3");//reset the color for all links
  while (d.parent) {
    d3.selectAll("#node"+d.id).style("fill", "red");//color the node
    if (d.parent != "null")
      d3.selectAll("#link"+d.parent.id + "-" + d.id).style("stroke", "red");//color the path
    d = d.parent;
  }
}

工作代码here http://plnkr.co/edit/qDA1U6HrWmJOCeKpxX2K?p=preview

EDIT：Plunker 适应堆栈片段：

var treeData = [{
  "name": "Top Level",
  "parent": "null",
  "children": [{
    "name": "Level 2: A",
    "parent": "Top Level",
    "children": [{
      "name": "Son of A",
      "parent": "Level 2: A"
    }, {
      "name": "Daughter of A",
      "parent": "Level 2: A"
    }]
  }, {
    "name": "Level 2: B",
    "parent": "Top Level"
  }]
}];


// ************** Generate the tree diagram  *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  },
  width = 960 - margin.right - margin.left,
  height = 180 - margin.top - margin.bottom;

var i = 0,
  duration = 750,
  root;

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

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

var svg = d3.select("body").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 + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

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

function update(source) {

  // 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)
    .attr("id", function(d){return "node" + d.id;})
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeEnter.append("text")
    .attr("x", function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .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 + ")";
    });

  nodeUpdate.select("circle")
    .attr("r", 10)
    .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 + ")";
    })
    .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("id", function(d){ return ("link" + d.source.id + "-" + d.target.id)})
    .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();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  //reset all nodes color
  d3.selectAll("circle").style("fill", "white");
  d3.selectAll("path").style("stroke", "#c3c3c3");
  while (d.parent) {
    d3.selectAll("#node"+d.id).style("fill", "red")
    if (d.parent != "null")
      d3.selectAll("#link"+d.parent.id + "-" + d.id).style("stroke", "red")
    d = d.parent;
  }
}
    .node {
      cursor: pointer;
    }
    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }
    .node text {
      font: 12px sans-serif;
    }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

D3 v6 示例here https://stackoverflow.com/a/68162099/765395.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

d3js

选择树形布局中子节点的所有路径和父节点 的相关文章

随机推荐

  • 当未指定默认命名空间时，函数“ ”必须带有前缀

    我们正在对表单变量进行一些奇怪的处理 不管怎样 我已经设法从请求中获取变量 这样我就可以做一些数据库的事情了 现在我想发回原样 以便可以用原始选择填充选择框 以下是选择字段的示例 JSP Condition Code nbsp

  • 使用自定义验证属性时收到错误消息

    我正在像这样使用 CustomValidationAttribute CustomValidation typeof MyValidator Validate ErrorMessage Foo 我的验证器包含这段代码 public clas

  • 如何使用 Angular-CLI 在控制台中显示日志

    我正在使用 angular cli 进行 webpack ng serve 构建成功 我明白了 NG Live Development Server 运行于http 本地主机 4200 http localhost 4200 哈希值 dd3

  • 在 Windows XP 上安装 JDK8 - advapi32.dll 错误

    我下载了JDK8 https jdk8 java net download htmlbuild b121 并在尝试安装时出现以下错误 the procedure entry point RegDeleteKeyExA could not b

  • 测试组件，这取决于路由参数

    我有一个关于在 angular2 中测试路由组件的问题 这是一个简单的组件 它依赖于带有参数的路由 foo 属性foo组件中的值将被设置为参数的值 import Component OnInit from angular core impo

  • TFS 构建定义 - 您可以将其添加到源代码管理中吗？

    我想将我的构建定义添加到 TFS 源代码管理中 有办法做到这一点吗 不完全是 不 如果您尝试跟踪构建定义的更改 您可以使用最新版本中的几个新命令Team Foundation 电动工具 http visualstudiogallery ms

  • 如何将 JTextField 限制为 x 个字符

    我必须限制 JTextField 中的字符数 我使用以下代码来执行此操作 但问题是我使用虚拟键盘将数据输入到 JTextField 所以偏移量始终设置为0 当我输入超过指定数量的字符时 它会重置该字段并从头开始执行 例如 如果我的限制是 3

  • 使用 ng-file-upload 和 Rails Carrierwave gem 上传多个文件

    我正在尝试结合ng 文件上传 and 载波上传多个文件 但服务器端的控制器只接收一个文件 所选文件的最后一项 客户端 参考 https github com danialfarid ng file upload usage html

  • 如何在 ejs 文件、nodeJS 应用程序中包含 JS 脚本？

    我正在做 NodeJS 教程开放课堂 https openclassrooms com courses des applications ultra rapides avec node js tp la todo list 我使用模板引擎e

  • 如何使用函数指针数组？

    我应该如何在 C 中使用函数指针数组 我怎样才能初始化它们 你有一个很好的例子这里 函数指针数组 http www java2s com Code C Function Arrayoffunctionpointer htm 与语法详细 ht

  • Webpack url 和文件加载器不适用于 Angular 2 所需的组件样式

    我正在使用 Angular 2 sass 和 webpack 构建一个应用程序 但我在每个组件内所需的 sass 文件上的 url 上遇到了麻烦 使用 require 它不会将这些文件复制到资产文件夹中 也不会将 url 修改为构建的 cs

  • 如何使用宏引用数据文件？

    我有各种 Stata 数据文件 它们位于不同的文件夹中 我也有一个单do使用这些文件的文件 一次一个 有没有办法使用宏来引用我的特定数据集do file 例如 local datafile C filepath mydata dta 我们的

  • 如何缩小java堆空间？ [复制]

    这个问题在这里已经有答案了 我有一个 Java 控制台应用程序 它使用 DOM 处理大型 xml 文件 基本上 它根据从数据库获取的数据创建 xml 文件 现在 正如您猜测的那样 它使用了大量内存 但令我惊讶的是 它与错误代码无关 而是与

  • Jetpack Compose 失败，并显示 NoClassDefFoundError: 无法解析：Landroidx/compose/runtime/MutableStateKt；

    我构建了一个应用程序来使用 Jetpack compose 在 alpha 11 之前一切都工作正常 但由于我尝试将其更新到 alpha 12 甚至 beta 1 该应用程序在运行时失败并出现错误NoClassDefFoundError F

  • 如何设置占位符文本的颜色和字体样式

    我想将颜色设置为占位符 将字体样式更改为粗体 并增加大小 我怎样才能实现这个目标 我应该为占位符提供样式 还是有其他方法可以实现此目的 我想设置颜色并更改字体样式以在所有浏览器中工作 以在下面的结果中选择大小

  • 为什么点击事件总是不触发？

    如果您重新审视这个问题 我已将所有更新移至底部 因此它实际上作为一个问题读起来更好 问题 我在使用处理浏览器事件时遇到了一些奇怪的问题D3 不幸的是 这位于一个相当大的应用程序中 并且因为我完全不知道原因是什么 所以我正在努力寻找一个小的可

  • 修改栈上的返回地址

    我研究了缓冲区溢出漏洞的基础知识 并尝试了解堆栈是如何工作的 为此 我想编写一个简单的程序 将返回地址的地址更改为某个值 有人可以帮助我计算基指针的大小以获得第一个参数的偏移量吗 void foo void char ret char pt

  • C# 帮助：在 C# 中对对象列表进行排序 [重复]

    这个问题在这里已经有答案了 可能的重复 使用预定义的排序值列表对对象进行排序 https stackoverflow com questions 652337 sort objects using predefined list of so

  • 根据求解器的决定执行 get-model 或 unsat-core

    我想知道 SMT LIB 2 0 脚本中是否有可能访问求解器的最后一个可满足性决策 sat unsat 例如 以下代码 set option produce unsat cores true set option produce model

  • 选择树形布局中子节点的所有路径和父节点

    我正在跟进this http bl ocks org d3noob 8375092学习 d3 js 树布局的教程 我正在研究它 单击子节点时 我尝试选择所有祖先节点以及连接它们的路径 我已经更改了默认值click教程中的函数看起来像这样 f

热门标签