如何进行d3js树设计

Question

我是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循环中调用此函数-输入具有必需属性的对象-等等

Answer 1

您的数据可以简单地添加到d3.js树形图中。

大致（取决于您将如何显示它）；

• 您加载数据
• 声明图的布局（大小等）
• 将整个SVG元素添加到页面
• 声明树的“根”点
• 将数据应用于d3.layout.tree进程

...可能有点像

• 使用d3.js magic分配节点和链接。
• 调整树的每个分支的深度
• 附加节点（在这种情况下为圆形）
• 附加链接

这里是使用数据的示例；

所以看起来有点像这样；

（我确实必须删除使数据“麻烦”的流逗号）。

您还可以像此处的示例（再次使用数据）那样使其具有交互性（单击节点以折叠并成长）。

您可以根据数据设置链接或节点的样式，或者在节点上显示更多信息，以使您心满意足。

这基于此处的代码和说明。