关于d3.js tree的使用（安全平台功能）

0x01 特别的tree

---

在安全平台项目里面需要使用tree做一个端口\IP树图并且跟机房一一对应，然后之前了解过前同事在做cmdb的时候用过这个玩意，然后也分享过，就翻下旧的代码，但是，一直没找到 orz。好吧，然后就自己研究下，看看这个玩意到底怎么玩。

0x02 摸索使用

---

最开始当然是参考下别人写的，看看咋用的。比如像这样：
http://www.cleey.com/blog/single/id/705.html
又或者这样：
http://blog.csdn.net/lzhlzz/article/details/38561737
但是感觉它们用的方式跟我期待的不太一样，并且对于我来说，扒下来测试的结果不行，可能自己的用法不对吧。。。反正就是各种错误。。用console将结果dump出来，也是个悲剧。

0x03 构建

---

后来经过折腾，分析javascript的源码以及对方提供的api，折腾出来了。对于我这种读书少的人简直就是一种罪过啊。。。

  function d3_dowrite(j_url){
      var m = [20, 120, 20, 120],
          w = 1280 - m[1] - m[3],
          h = 768 - m[0] - m[2],
          i = 0,
          root;

      var tree = d3.layout.tree()
          .size([h, w]);

      var diagonal = d3.svg.diagonal()
          .projection(function(d) { return [d.y, d.x]; });

      var vis = d3.select("#tree-container").append("svg:svg")
          .attr("width", w + m[1] + m[3])
          .attr("height", h + m[0] + m[2])
        .append("svg:g")
          .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

      d3.json(j_url, function(json) {
        root = json;
        root.x0 = h / 2;
        root.y0 = 0;

        function toggleAll(d) {
          if (d.children) {
            d.children.forEach(toggleAll);
            toggle(d);
          }
        }

        // Initialize the display to show a few nodes.
        root.children.forEach(toggleAll);
        for (var i = 0; i

用法：

  path = window.location.pathname;
  if (path == '/index.php/houtai/portscan'){
    d3_dowrite('http://scanp.my.com//flare.json');
  }

由于我的页面是刷新跳转的，所以我需要判断页面的地址。根据不同的地址，我需要将不同的数据加载。so，就是这样了。。

0x04 效果图

---

效果图