【发布时间】：2014-08-25 14:40:29
【问题描述】：
我一般是 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 循环中调用此函数 - 输入具有所需属性的对象 - 等等
【问题讨论】：
-
我完全不清楚为什么要在这个设计中使用 D3.js。使用普通的旧 JavaScript 和一些基本的 HTML 和 CSS 来实现可能要简单得多。您为什么不先尝试这种方式以避免 D3 使事情复杂化呢？然后，一旦您的代码和交互工作正常，如果需要，添加 D3.js 作为增强功能会容易得多（尽管我认为您不需要它）。
-
如果您不想自己编写代码，可以使用大量的 JavaScript 手风琴库。 Here's one 从 2007 年开始仍然可以正常工作。 （查看垂直嵌套示例。）
标签： javascript json d3.js