相关疑难解决方法(0)

你如何在d3.js中创建一个家谱?

我目前正在进行一项小型家谱实验,并希望实现一个简单的家谱,如下图所示.

到目前为止,最好的搜索结果只产生了一个例子,其中一个孩子只能有一个父节点.但我需要的是能够在实体(从父亲到母亲)和节点与其他链接(从子节点到父母链接)之间建立链接.目前我没有固定的数据模式.

我为此选择了d3.js 因为它看起来能够胜任这项工作.我只是不知道如何开始甚至从哪里开始.关于d3.js的教程仅涵盖条形图等标准图表.

我希望有人可以帮助我.

这就是结果的样子

javascript charts genealogy family-tree d3.js

54
推荐指数
3
解决办法
3万
查看次数

如何从内部JSON数组而不是外部资源/文件加载d3.js中可折叠树的数据?

我希望从文件中加载JSON数据数组,以根据此处Mike Bostock示例生成可折叠树形图.该示例使用格式正确的外部JSON文件,并使用d3.json函数加载它.

我希望能够从文件中加载一个json数组,这是从flay数组生成多级数组的结果(根据这里示例问题).

一个我已经站了起来bl.ocks.org样本文件/ GitHub上显示的是什么,我想实现,而不采取多层次的JSON数据,并将其加入到可折叠的树形图中的重要组成部分两个部分

简而言之.我在文件中声明了以下数据;

var data = [
     { "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
     { "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
     { "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 },
     { "name" : "new_name2", "parent":"ABC", "relation": "foo", "depth": 2 },
     { "name" : "Foo", "parent":"DEF", "relation": "rel", "depth": 2 }
    ];
Run Code Online (Sandbox Code Playgroud)

然后通过这部分代码运行...

var dataMap = data.reduce(function(map, node) {
    map[node.name] = …
Run Code Online (Sandbox Code Playgroud)

d3.js

9
推荐指数
1
解决办法
9669
查看次数

如何将两个父节点连接到一个子节点,以及如何实用地为树中的每个节点制作工具提示?在 D3 js (SVG) 中

我制作了一个树形图结构,它工作得非常好。但现在我想做一个小小的改变却无法做出改变。我想将两个父节点连接到一个子节点...我还尝试实用地向每个节点添加一个工具提示。

例如 - 如果您运行代码,您会更清楚地看到它。我想创建 Hanna 的子节点并标记它将连接到名为“Eric”的子节点。

知道如何实现这一目标吗?

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 600)
  .append("g")
  .attr("transform", "translate(50,50)");

//tree data
var data = [
  { child: "John", parent: "" },
  { child: "Aron", parent: "Kevin" },
  { child: "Kevin", parent: "John" },
  { child: "Hannah", parent: "Anna" },
  { child: "Rose", parent: "Sarah" },
  { child: "Anna", parent: "John" },
  { child: "Sarah", parent: "Kevin" },
  { child: "Mark", parent: "Anna" },
  { child: "Angle", parent: "Sarah" }, …
Run Code Online (Sandbox Code Playgroud)

javascript css svg dom d3.js

5
推荐指数
1
解决办法
1759
查看次数

标签 统计

d3.js ×3

javascript ×2

charts ×1

css ×1

dom ×1

family-tree ×1

genealogy ×1

svg ×1