Javascript 如何实现d3js树设计
一般来说,我对d3js和javascript都是新手。我正试图创建一个基于使用d3js建模json数据的交互式IP管理概述。我已经对我想做的事情有了一个大致的想法,我认为适合这项工作的工具是使用d3.layout.tree,它为我提供了所有节点之间的深度和链接。然而,考虑到这是我的第一个d3js项目,我不能完全掌握如何实现这个设计。我看了一些教程,研究了基于d3.layout.tree的示例,例如。但是,要想找到解决方案,这条曲线太陡了 以下是我试图基于此json数据大致完成的工作: 有人能大致概述一下我需要采取哪些步骤才能达到目的吗? 像这样的东西真的很有帮助: -具有执行以下操作的功能: -在foreach循环中调用此函数 -输入具有所需属性的对象Javascript 如何实现d3js树设计,javascript,json,d3.js,Javascript,Json,D3.js,一般来说,我对d3js和javascript都是新手。我正试图创建一个基于使用d3js建模json数据的交互式IP管理概述。我已经对我想做的事情有了一个大致的想法,我认为适合这项工作的工具是使用d3.layout.tree,它为我提供了所有节点之间的深度和链接。然而,考虑到这是我的第一个d3js项目,我不能完全掌握如何实现这个设计。我看了一些教程,研究了基于d3.layout.tree的示例,例如。但是,要想找到解决方案,这条曲线太陡了 以下是我试图基于此json数据大致完成的工作: 有人能大致
-etc您的数据可以简单地添加到d3.js树形图中 大致(取决于您将如何显示它)
- 你加载你的数据
- 声明您的应用程序的布局(大小等) 图解
- 将整个SVG元素附加到页面中
- 申报 树的“根”点
- 将数据应用到d3.layout.tree 过程
- 使用d3.js magic分配节点和链接
- 调整树的每个分支的深度
- 附加节点(本例中为圆圈)
- 附加链接
这是基于代码和说明。我一点也不清楚为什么要使用D3.js进行此设计。使用简单的旧JavaScript和一些基本的HTML和CSS实现可能会简单得多。你为什么不先尝试一下,避免D3的复杂化呢?然后,一旦代码和交互工作正常,如果需要的话(尽管我认为您不需要它),添加D3.js作为增强会容易得多。从2007年开始,这仍然很好。(看垂直嵌套的例子)非常感谢你详细的回答。正如您在我最初的帖子中所看到的,我已经朝着使用树功能的方向前进了。谢谢你把它放在我的上下文中,这应该为我提供一个很好的框架。如何区分超级网和子网节点?子网节点还包含一个主机数组,我希望以不同的方式呈现它。另外,我如何确保10.0.0.0/16和10.20.0.0/16都被选中?似乎10.0.0.0/16已被用作根节点,因此未拾取10.20/16。谢谢。要在子网中呈现不同的主机,您只需在呈现节点时检查“类型”以及适当的颜色或大小(书中有这样的示例。要同时使用10.0.0.0/16和10.20.0.0/16,您需要一个节点,它们都是子节点。不太确定如何表示。
Initially rendered as:
---------------------------------------------------
| 10.0.0.0/16 |
---------------------------------------------------
---------------------------------------------------
| 10.10.0.0/16 |
---------------------------------------------------
On-click 10.20.0.0/16 (type supernet):
---------------------------------------------------
| 10.0.0.0/16 |
---------------------------------------------------
---------------------------------------------------
| 10.20.0.0/16 |
---------------------------------------------------
| -----------------------------------------------
-- | 10.0.200.0/24 |
-----------------------------------------------
On-click 10.0.0.0/16: (collapse all other parents)
---------------------------------------------------
| 10.0.0.0/16 |
---------------------------------------------------
| -----------------------------------------------
-- | 10.0.1.0/24 |
| -----------------------------------------------
| -----------------------------------------------
-- | 10.0.100.0/24 |
| -----------------------------------------------
| -----------------------------------------------
-- | 10.0.200.0/24 |
-----------------------------------------------
---------------------------------------------------
| 10.20.0.0/16 |
---------------------------------------------------
On-click 10.0.1.0/24 (type supernet):
---------------------------------------------------
| 10.0.0.0/16 |
---------------------------------------------------
| -----------------------------------------------
-- | 10.0.1.0/24 |
-----------------------------------------------
| -------------------------------------------
-- | 10.0.1.64/26 |
| -------------------------------------------
| -------------------------------------------
-- | 10.0.1.128/26 |
-------------------------------------------
-----------------------------------------------
| 10.0.100.0/24 |
-----------------------------------------------
-----------------------------------------------
| 10.0.200.0/24 |
-----------------------------------------------
---------------------------------------------------
| 10.20.0.0/16 |
---------------------------------------------------
On-click 10.0.100.64/26 (type subnet):
---------------------------------------------------
| 10.0.0.0/16 |
---------------------------------------------------
| -----------------------------------------------
-- | 10.0.1.0/24 |
| -----------------------------------------------
| | -------------------------------------------
| -- | 10.0.1.64/26 |
| | -------------------------------------------
| |/ |
| / |
| / |
| / |
|/ |
/ |
---------------------------------------------------
| x x x x x x x x x x x x x x x x x x x x x x x x | <-- rendered based on hosts array in subnet nodes
| x x x x x x x x x x x x x x x x x x x x x x x x |
| x x x x x x x x x x x x x x x x x x x x x x x x |
| x x x x x x x x x x x x x x x x x x x x x x x x |
---------------------------------------------------
| | -------------------------------------------
| -- | 10.0.1.128/26 |
| -------------------------------------------
| -----------------------------------------------
-- | 10.0.100.0/24 |
| -----------------------------------------------
| -----------------------------------------------
-- | 10.0.200.0/24 |
-----------------------------------------------
---------------------------------------------------
| 10.20.0.0/16 |
---------------------------------------------------
On-click 10.0.1.128/26 (type subnet):
(auto collapse all children under other nodes on same level)
---------------------------------------------------
| 10.0.0.0/16 |
---------------------------------------------------
| -----------------------------------------------
-- | 10.0.1.0/24 |
| -----------------------------------------------
| | -------------------------------------------
| -- | 10.0.1.64/26 |
| | -------------------------------------------
| | -------------------------------------------
| -- | 10.0.1.128/26 |
| -------------------------------------------
| / |
| / |
| / |
| / |
|/ |
/ |
---------------------------------------------------
| x x x x x x x x x x x x x x x x x x x x x x x x | <-- rendered based on hosts array in subnet nodes
| x x x x x x x x x x x x x x x x x x x x x x x x |
| x x x x x x x x x x x x x x x x x x x x x x x x |
| x x x x x x x x x x x x x x x x x x x x x x x x |
---------------------------------------------------
| -----------------------------------------------
-- | 10.0.100.0/24 |
| -----------------------------------------------
| -----------------------------------------------
-- | 10.0.200.0/24 |
-----------------------------------------------
---------------------------------------------------
| 10.20.0.0/16 |
---------------------------------------------------
Super and subnet "bars" to be rendered with indication of % of usage based on children or hosts:
(++++ is different gradient color)
---------------------------------------------------
| 10.20.0.0/16+++++++++++60%| |
---------------------------------------------------
var x_margin = 20,
y_margin = 20,
height = window.innerHeight - y_margin,
width = window.innerWidth - x_margin;
var body = d3.select("body");
var svg = body.append("svg").attr("width", width).attr("height", height);
var tree = d3.layout.tree()
.size([height, width]);
function supernet_usage(supernet) {
//returns the amount of space used based on children in given supernet in percentage
}
function subnet_usage(subnet) {
//returns the amount of space used based on hosts in given subnet in percentage
}
function supernet(supernet) {
//renders a supernet view of the given subnet
}
function subnet(subnet) {
//renders a subnet view of the given subnet
}
function calc_hosts(length) {
//Calculates the number of hosts in an IP subnet based on masklength
return Math.pow(2,(32 - length))
}
function max_subnet_size (data) {
// returns largest subnet size in this level of the hierarchie
return d3.max(data, function(d) { return +d.net_masklength;} );
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
function main() {
// Main application code
d3.json("/d3/data.json", function(data) {
// Executing all actions is done inside the json function call, because of asynchronous handling otherwise
//console.log(data);
root = data[0]
// Compute the new tree layout.
var nodes = tree.nodes(root),
links = tree.links(nodes);
console.log(nodes);
console.log(links);
});
}
main();