d3.js - D3 树布局可视化 - 继承具有多个父级的子级-6ren

d3.js - D3 树布局可视化 - 继承具有多个父级的子级

转载作者：行者123 更新时间：2023-12-04 19:31:14

我是 D3 可视化的新鲜蜜蜂。目前正在为数据沿袭创建 D3 树布局可视化。在数据沿袭流中，可以从多个父节点派生一个子节点。这是示例。在下面的示例中，“DevLead”可能与 2 个经理一起工作。

var data = [
     { "name": "Director", "parent": "null", "depth": 0 },
     { "name": "Manager1", "parent": "Director", "depth": 1 },
     { "name": "Manager2", "parent": "Director", "depth": 1 },
     { "name": "DevLead", "parent": "Manager1", "depth": 2 },
     { "name": "DevLead", "parent": "Manager2", "depth": 2 }
        ];

获取输出请引用下图。

我希望看到“DevLead” child 应该只展示一个，并且应该有一个来自“Manager1”和“Manager2”的派生词。任何人都可以帮助解决这个问题。

最佳答案

D3 树布局并不完全支持多个父级

你能做什么？

改用网络图 - 缺点是节点定位是
难的

我有类似的要求并尝试构建类似的网络图
使用树状布局，但是当节点很多时，它会变得凌乱......
you can check it oncodepen

在树布局上使用 hack - 从其他节点绘制附加链接
check this example

另一个使用隐藏节点的黑客 - jsfiddle

此外，我认为，这些链接将进一步帮助您:

Family Tree in d3.js

d-tree library - data with multiple parents

如果你选择第一个选项，在这里，你可以通过在数据中删除和添加节点来玩这个片段

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - A Pen by  dato</title>
  
  
  
  
  
  
  
  
  
</head>

<body translate="no" >

  
  
  <script src='https://d3js.org/d3.v3.min.js'></script>

    <script>
    var width = window.innerWidth - 20,
  height = window.innerHeight - 20,
  radius = 30;

var min_zoom = 0.1;
var max_zoom = 7;

var zoom = d3.behavior.zoom().scaleExtent([min_zoom, max_zoom])

var fill = d3.scale.category20();

var force = d3.layout.force()

.charge(-8000)
  .linkDistance(200)

.size([width, height]);

force.drag().on("dragstart", dragstarted)

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var chart = svg.append('g');

var json = {
  "nodes": [{
    "name": "node0"
  }, {
    "name": "node1"
  }, {
    "name": "node2"
  }, {
    "name": "node3"
  }, {
    "name": "node4"
  }, {
    "name": "node5"
  }, {
    "name": "node6"
  }, {
    "name": "node7"
  }, {
    "name": "node8"
  }, {
    "name": "node9"
  }, {
    "name": "node10"
  }, {
    "name": "node11"
  }, {
    "name": "node12"
  }, {
    "name": "node13"
  }, {
    "name": "node14"
  }, {
    "name": "node15"
  }, {
    "name": "node16"
  }, {
    "name": "node17"
  }, {
    "name": "node18"
  }, {
    "name": "node19"
  }, {
    "name": "node20"
  }, {
    "name": "node21"
  }, {
    "name": "node22"
  }, {
    "name": "node23"
  }, {
    "name": "node24"
  }, {
    "name": "node25"
  }, {
    "name": "node26"
  }, {
    "name": "node27"
  }, {
    "name": "node28"
  }, {
    "name": "node29"
  }, {
    "name": "node30"
  }, {
    "name": "node31"
  }, {
    "name": "node32"
  }, {
    "name": "node33"
  }, {
    "name": "node34"
  }, {
    "name": "node35"
  }, {
    "name": "node36"
  }, {
    "name": "node37"
  }, {
    "name": "node38"
  }, {
    "name": "node39"
  }, {
    "name": "node40"
  }, {
    "name": "node41"
  }, {
    "name": "node42"
  }, {
    "name": "node43"
  }, {
    "name": "node44"
  }, {
    "name": "node45"
  }, {
    "name": "node46"
  }, {
    "name": "node47"
  }, {
    "name": "node48"
  }, {
    "name": "node49"
  }, {
    "name": "node50"
  }, {
    "name": "node51"
  }, {
    "name": "node52"
  }, {
    "name": "node53"
  }, {
    "name": "node54"
  }, {
    "name": "node55"
  }, {
    "name": "node56"
  }, {
    "name": "node57"
  }, {
    "name": "node58"
  }, {
    "name": "node59"
  }, {
    "name": "node60"
  }, {
    "name": "node61"
  }, {
    "name": "node62"
  }, {
    "name": "node63"
  }, {
    "name": "node64"
  }, {
    "name": "node65"
  }, {
    "name": "node66"
  }, {
    "name": "node67"
  }, {
    "name": "node68"
  }, {
    "name": "node69"
  }, {
    "name": "node70"
  }, {
    "name": "node71"
  }, {
    "name": "node72"
  }, {
    "name": "node73"
  }, {
    "name": "node74"
  }, {
    "name": "node75"
  }, {
    "name": "node76"
  }, {
    "name": "node77"
  }, {
    "name": "node78"
  }, {
    "name": "node79"
  }, {
    "name": "node80"
  }, {
    "name": "node81"
  }, {
    "name": "node82"
  }, {
    "name": "node83"
  }, {
    "name": "node84"
  }, {
    "name": "node85"
  }, {
    "name": "node86"
  }, {
    "name": "node87"
  }, {
    "name": "node88"
  }, {
    "name": "node89"
  }, {
    "name": "node90"
  }, {
    "name": "node91"
  }, {
    "name": "node92"
  }, {
    "name": "node93"
  }, {
    "name": "node94"
  }, {
    "name": "node95"
  }, {
    "name": "node96"
  }, {
    "name": "node97"
  }, {
    "name": "node98"
  }, {
    "name": "node99"
  }],
  "links": [ {
    "source": 0,
    "target": 1
  }, {
    "source": 0,
    "target": 2
  }, {
    "source": 1,
    "target": 3
  }, {
    "source": 1,
    "target": 4
  }, {
    "source": 2,
    "target": 5
  }, {
    "source": 2,
    "target": 6
  }, {
    "source": 3,
    "target": 7
  }, {
    "source": 3,
    "target": 8
  }, {
    "source": 4,
    "target": 9
  }, {
    "source": 4,
    "target": 10
  }, {
    "source": 5,
    "target": 11
  }, {
    "source": 5,
    "target": 12
  }, {
    "source": 6,
    "target": 13
  }, {
    "source": 6,
    "target": 14
  }, {
    "source": 7,
    "target": 15
  }, {
    "source": 7,
    "target": 16
  }, {
    "source": 8,
    "target": 17
  }, {
    "source": 8,
    "target": 18
  }, {
    "source": 9,
    "target": 19
  }, {
    "source": 9,
    "target": 20
  }, {
    "source": 10,
    "target": 21
  }, {
    "source": 10,
    "target": 22
  }, {
    "source": 11,
    "target": 23
  }, {
    "source": 11,
    "target": 24
  }, {
    "source": 12,
    "target": 25
  }, {
    "source": 12,
    "target": 26
  }, {
    "source": 13,
    "target": 27
  }, {
    "source": 13,
    "target": 28
  }, {
    "source": 14,
    "target": 29
  }, {
    "source": 14,
    "target": 30
  }, {
    "source": 15,
    "target": 31
  }, {
    "source": 15,
    "target": 32
  }, {
    "source": 16,
    "target": 33
  }, {
    "source": 16,
    "target": 34
  }, {
    "source": 17,
    "target": 35
  }, {
    "source": 17,
    "target": 36
  }, {
    "source": 18,
    "target": 37
  }, {
    "source": 18,
    "target": 38
  }, {
    "source": 19,
    "target": 39
  }, {
    "source": 19,
    "target": 40
  }, {
    "source": 20,
    "target": 41
  }, {
    "source": 20,
    "target": 42
  }, {
    "source": 21,
    "target": 43
  }, {
    "source": 21,
    "target": 44
  }, {
    "source": 22,
    "target": 45
  }, {
    "source": 22,
    "target": 46
  }, {
    "source": 23,
    "target": 47
  }, {
    "source": 23,
    "target": 48
  }, {
    "source": 24,
    "target": 49
  }, {
    "source": 24,
    "target": 50
  }, {
    "source": 25,
    "target": 51
  }, {
    "source": 25,
    "target": 52
  }, {
    "source": 26,
    "target": 53
  }, {
    "source": 26,
    "target": 54
  }, {
    "source": 27,
    "target": 55
  }, {
    "source": 27,
    "target": 56
  }, {
    "source": 28,
    "target": 57
  }, {
    "source": 28,
    "target": 58
  }, {
    "source": 29,
    "target": 59
  }, {
    "source": 29,
    "target": 60
  }, {
    "source": 30,
    "target": 61
  }, {
    "source": 30,
    "target": 62
  }, {
    "source": 31,
    "target": 63
  }, {
    "source": 31,
    "target": 64
  }, {
    "source": 32,
    "target": 65
  }, {
    "source": 32,
    "target": 66
  }, {
    "source": 33,
    "target": 67
  }, {
    "source": 33,
    "target": 68
  }, {
    "source": 34,
    "target": 69
  }, {
    "source": 34,
    "target": 70
  }, {
    "source": 35,
    "target": 71
  }, {
    "source": 35,
    "target": 72
  }, {
    "source": 36,
    "target": 73
  }, {
    "source": 36,
    "target": 74
  }, {
    "source": 37,
    "target": 75
  }, {
    "source": 37,
    "target": 76
  }, {
    "source": 38,
    "target": 77
  }, {
    "source": 38,
    "target": 78
  }, {
    "source": 39,
    "target": 79
  }, {
    "source": 39,
    "target": 80
  }, {
    "source": 40,
    "target": 81
  }, {
    "source": 40,
    "target": 82
  }, {
    "source": 41,
    "target": 83
  }, {
    "source": 41,
    "target": 84
  }, {
    "source": 42,
    "target": 85
  }, {
    "source": 42,
    "target": 86
  }, {
    "source": 43,
    "target": 87
  }, {
    "source": 43,
    "target": 88
  }, {
    "source": 44,
    "target": 89
  }, {
    "source": 44,
    "target": 90
  }, {
    "source": 45,
    "target": 91
  }, {
    "source": 45,
    "target": 92
  }, {
    "source": 46,
    "target": 93
  }, {
    "source": 46,
    "target": 94
  }, {
    "source": 47,
    "target": 95
  }, {
    "source": 47,
    "target": 96
  }, {
    "source": 48,
    "target": 97
  }, {
    "source": 48,
    "target": 98
  }, {
    "source": 49,
    "target": 99
  },{
    "source": 0,
    "target": 99
  }]
}

var link = chart.selectAll("line")
  .data(json.links)
  .enter()
  .append("line")
  .attr("stroke", function(d) {
    return 'blue'
  })

var node = chart.selectAll("circle")
  .data(json.nodes)
  .enter().append("circle")
  .attr("r", radius - .75)
  .style("fill", function(d) {
    return fill(d.group);
  })
  .style("stroke", function(d) {
    return d3.rgb(fill(d.group)).darker();
  })
  .on('mouseover', d => console.log(d))

.call(force.drag);

function dragstarted() {
  d3.event.sourceEvent.stopPropagation();
}

zoom.on("zoom", function(d) {

  var evt = d3.event;
  debugger;
  /*
	var dcx = (window.innerWidth/2-d.x*zoom.scale());
	var dcy = (window.innerHeight/2-d.y*zoom.scale());
  */
  var dcx = evt.translate[0]
  var dcy = evt.translate[1]

  zoom.translate([dcx, dcy]);

  chart.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");;

});

force
  .nodes(json.nodes)
  .links(json.links)
  .on("tick", tick)
  .start();

svg.call(zoom)

function tick(e) {
console.log(e)
  var k = 6 * e.alpha;

  // Push sources up and targets down to form a weak tree.
  link
    .each(function(d,i) {
   
      d.source.y -= k * 60, d.target.y += k * 100;
    /*
    if(i%2==1){
       d.source.x -=  0.4/k  
    }else{
        d.source.x +=  0.4/k  
    }
    */
    
    })
    .attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });

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

}
  </script>

  
  

</body>
</html>

关于d3.js - D3 树布局可视化 - 继承具有多个父级的子级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43527019/

文章推荐： x86 - 系统声称支持 AVX2，但未实现整数寄存器的广播

文章推荐： time - 在 Rails 3 中使用 distance_of_time_in_words

文章推荐： networking - 有时 docker 容器 dns 失败

检查用户输入的字符串在 C 中的格式为 "%d/%d/%d/%d/%d"
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
java - 使用此表单获取号码\d\s\d\d\s\d
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
d - D 语言是否完全依赖于 D 运行时？
最近一直在学习D语言。我一直对运行时感到困惑。从我能收集到的关于它的信息中，(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样，它与您自己的程序一起运行。但是既然 D 是编译
java - 这两种语法\\d\\d\\d 和\\d{3} 在所有环境中都一样吗？
想问一下这两个正则表达式有区别吗？ \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试，两者都工作正常并且结果相同。但是，当在 linux
go - 为什么我不能执行 fmt.Sprintf ("%d.%d.%d.%d"，一个...)？
我正在学习 Go，而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。这是一些代码: type IPAddr
java - Java中的正则表达式: Pattern.编译( "J.*\\d[0-35-9]-\\d\\d-\\d\\d")
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
ruby - gsub(/(\d{4})\/(\d\d)\/(\d\d)\/(.*)/, '\1-\2-\3-\4' ) 是什么意思？
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思，但是\1-\2-\3-\4 是什么意思？最佳答案 \1-\2-\3-\4 是 b
d - 如何在没有 D 运行时编译 D 应用程序？
我一直在努力解决这个问题，这让我很恼火。我了解 D 运行时库。它是什么，它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧，XoMB 定义了自己的运行时，但是
Java算法到 "multiply"两个列表列表((A),(B))*((C,C),(D,D))==((A,C,C),(A,D,D), (B,C,C),(B,D,D))
我有两个列表列表，子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
java - 如何清理和打印\d{3}\d{3}\d{2}\d{2}格式的数字
我需要使用 Regex 格式化一个字符串，该字符串包含数字、字母 a-z 和 A-Z，同时还包含破折号和空格。从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
d - D 中的表达式模板
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D，但没有成功。我也尝试过不同的方法。 import std.datetime : benc
d - D 中的完美转发？
tl;dr:你好吗perfect forwarding在 D？该链接有一个很好的解释，但例如，假设我有这个方法: void foo(T)(in int a, out int b, ref int c
d - D 中的抽象自动函数
有什么方法可以在 D 中使用abstract auto 函数吗？如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
d - D 中的切片交集
有没有人为内存中重叠的数组切片实现交集？算法在没有重叠时返回 []。当 pretty-print (使用重叠缩进)内存中重叠的数组切片时，我想要这个。最佳答案如果您确定它们是数组，那么只需取 p
d - D 中循环索引变量的默认类型是什么？
我已经开始学习 D，但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
d - D 中唯一的不可变类
如何创建一个不可变的类？我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData，m 表示可变。然后我创建一个别名 alias immut
d - D 中的扩展函数
不久前我买了《The D Programming Language》。好书，很有教育意义。但是，我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。在这本书中，Andrei 写了任何可以像这样调用
d - D 中的无限数据结构
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例我想知道如何在 D 中实现可能的无限数据结构，就像
c - printf ("%d %d %d\n",++a, a++,a) 输出
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
d - D:查找具有特定属性的所有功能
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数（或类）？例如： source/packageA/something.d: @sillyWalk(10) void doSomething()

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - D3 树布局可视化 - 继承具有多个父级的子级