如何处理d3js树设计
我是d3js和javascript的新手。我正在尝试基于使用d3js建模json数据来创建交互式IP管理概述。我对我想要做的事情有一个大概的想法，我认为正确的工具是使用d3.layout.tree，它给了我所有节点之间的深度和链接。但是考虑到这是我的第一个d3js项目，我无法完全掌握如何处理这个设计。我观看了几个教程，研究了基于d3.layout.tree的示例，例如http://bl.ocks.org/mbostock/1093025。但曲线是陡峭的，以便看到解决方案的路径。
以下是我基于此json数据大致尝试完成的内容：http://pastebin.com/dajCKb2P
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%| |
---------------------------------------------------
（我将自己从另一个系统输出json文件，因此可以调整）
我有一个粗略的大纲设置来访问json代码并计算树：
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();
有人能粗略地概述我需要采取的步骤吗？ 像这样的东西真的很有帮助： - 有一个功能来做这些事情： - 在foreach循环中调用此函数 - 输入具有必需属性的对象 - 等等
1 个答案:
答案 0 :(得分：0)
您的数据可以简单地添加到d3.js树形图中。
大致（取决于你将如何展示它）;
- 您加载数据
- 声明您的布局（大小等） 图
- 将整个SVG元素附加到您的页面
- 宣布 树的'根'点
- 将您的数据应用于d3.layout.tree 过程
......这可能有点像;
- 使用d3.js magic分配节点和链接。
- 调整树的每个分支的深度
- 附加节点（本例中为圆圈）
- 附加链接
使用您的数据的示例是here;
所以它看起来有点像这样;
（我确实要删除一个使数据'麻烦'的迷路逗号）
您还可以将其设置为交互式（点击要折叠和增长的节点），例如示例here（再次使用您的数据）;
您可以根据您的数据设置链接或节点的样式，或者在节点上显示更多信息，让您高兴。
这是基于代码和说明here。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？