关于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<root.children.length; i++){
          toggle(root.children[i]);
        }

        update(root);
      });

      function update(source) {
        var duration = d3.event && d3.event.altKey ? 5000 : 500;

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse();

        // Normalize for fixed-depth.
        nodes.forEach(function(d) { d.y = d.depth * 180; });

        // Update the nodes…
        var node = vis.selectAll("g.node")
            .data(nodes, function(d) { return d.id || (d.id = ++i); });

        // Enter any new nodes at the parent's previous position.
        var nodeEnter = node.enter().append("svg:g")
            .attr("class", "node")
            .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
            .on("click", function(d) { toggle(d); update(d); });

        nodeEnter.append("svg:circle")
            .attr("r", 1e-6)
            .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

        nodeEnter.append("svg:text")
            .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
            .attr("dy", ".35em")
            .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
            .text(function(d) { return d.name; })
            .style("fill-opacity", 1e-6);

        // Transition nodes to their new position.
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

        nodeUpdate.select("circle")
            .attr("r", 4.5)
            .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

        nodeUpdate.select("text")
            .style("fill-opacity", 1);

        // Transition exiting nodes to the parent's new position.
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
            .remove();

        nodeExit.select("circle")
            .attr("r", 1e-6);

        nodeExit.select("text")
            .style("fill-opacity", 1e-6);

        // Update the links…
        var link = vis.selectAll("path.link")
            .data(tree.links(nodes), function(d) { return d.target.id; });

        // Enter any new links at the parent's previous position.
        link.enter().insert("svg:path", "g")
            .attr("class", "link")
            .attr("d", function(d) {
              var o = {x: source.x0, y: source.y0};
              return diagonal({source: o, target: o});
            })
          .transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition links to their new position.
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link.exit().transition()
            .duration(duration)
            .attr("d", function(d) {
              var o = {x: source.x, y: source.y};
              return diagonal({source: o, target: o});
            })
            .remove();

        // Stash the old positions for transition.
        nodes.forEach(function(d) {
          d.x0 = d.x;
          d.y0 = d.y;
        });
      }

      // Toggle children.
      function toggle(d) {
        if (d.children) {
          d._children = d.children;
          d.children = null;
        } else {
          d.children = d._children;
          d._children = null;
        }
      }
  }

用法：

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

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

0x04 效果图

---

效果图