d3 트 리 레이아웃 트 리

트 리 레이아웃 트 리 레이아웃 안내
분명 한 것 은 나무 모양 의 구 조 는 우리 가 흔히 이해 하 는 데이터 구조 중의 나무 로 하나의 노드 에서 밖으로 전개 되 고 앞의 힘 안내 그림 의 데이터 구조 모델 과 일치 하 며 전시 형식 만 약간 차이 가 있 을 뿐 나무 모양 의 구조 로 보 여 주 는 것 이 더욱 간단명료 하고 선명 해 보인다.
API
나무 구조

d3. layot. tree () 기본 설정 으로 새 트 리 레이아웃 만 들 기:

tree. nodes (root) 는 전 송 된 데이터 에 따라 트 리 의 레이아웃 에 따라 노드 배열

을 되 돌려 줍 니 다.

tree. links (nodes) 는 노드 배열 에 따라 노드 간 의 부자 연결 관 계 를 되 돌려 줍 니 다

tree. separation ([separation]): 두 노드 사이 의 간격 을 설정 하거나 얻 기

tree. size ([size]) 지정 한 트 리 레이아웃 의 크기

svg 모양
복사 구 조 를 실현 하고 연결선 은 베 세 르 곡선 이 므 로 좌표 투영 으로 경로 모양 생 성 을 실현 해 야 한다.경로 모양 은 d3. svg. line (), d3. svg. area (), d3. svg. diagonal () 등 여러 가지 선택 이 있 습 니 다.d3. svg. diagonal () 을 선택 하면 procjection 의 API 를 이용 하여 svg 의 path 모양 의 경 로 를 생 성 할 수 있 습 니 다.

d3.svg.diagonal.radial().projection(）

예제 코드
홈 페이지 의 일부 사람들 이 제공 하 는 데모 수정 에 따라 복사 구 조 를 썼 습 니 다. 안에 주석 을 달 았 지만 d. x - 90 과 같은 의 심 스 러 운 점 이 있 습 니 다. 예 를 들 어 d. x - 90 의 원인 은 모호 합 니 다.
다음은 전체 데모 코드 입 니 다.

    
    
    





    var width = 800,
        height = 800;

    var i = 0,
        duration = 6000,
        root;

    var tree = d3.layout.tree()
        .size([360, 320])  //360             ，   r                ，                ,            ，  85 d.y            。
        .separation(function(a, b) {
            return (a.parent == b.parent ? 1 : 2) / a.depth;  //  radial  ，            ，            。
        });

    var diagonal = d3.svg.diagonal.radial()
        .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); //d.y    ，(d.x/180)*PI           。

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    d3.json("flare1.json", function(error, flare) {
      if (error) throw error;

      root = flare;
      root.x0 = height / 2;  //          y0   0,      x0                 。           
      root.y0 = 0;

      function collapse(d) {
        if (d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }

      root.children.forEach(collapse);
      update(root);
    });

    // // Hack to make this example display correctly in an iframe on bl.ocks.org    iframe       。
    d3.select(self.frameElement).style("height", "800px");

    function update(source) {

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

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

      // Update the nodes…
      var node = svg.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("g")
          .attr("class", "node")
          // .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
          .on("click", click);

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

      nodeEnter.append("text")
          // .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
          .attr("dy", ".35em")

      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })//  180        ，        
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
          // .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 "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
          //translate   rotate           ？？？
      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 "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
          .remove();

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

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

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

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

      // 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.x0, y: source.y0};
            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 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);
    }

  

json 데이터 파일 flare1. json 은 다음 과 같 습 니 다.

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
     ]
    }
   ]
  },
  {
   "name": "animate",
   "children": [
    {"name": "Easing", "size": 17010},
    {"name": "FunctionSequence", "size": 5842},
    {
     "name": "interpolate",
     "children": [
      {"name": "ArrayInterpolator", "size": 1983},
      {"name": "ColorInterpolator", "size": 2047},
      {"name": "DateInterpolator", "size": 1375},
      {"name": "Interpolator", "size": 8746},
      {"name": "MatrixInterpolator", "size": 2202},
      {"name": "NumberInterpolator", "size": 1382},
      {"name": "ObjectInterpolator", "size": 1629},
      {"name": "PointInterpolator", "size": 1675},
      {"name": "RectangleInterpolator", "size": 2042}
     ]
    },
    {"name": "ISchedulable", "size": 1041},
    {"name": "Parallel", "size": 5176},
    {"name": "Pause", "size": 449},
    {"name": "Scheduler", "size": 5593},
    {"name": "Sequence", "size": 5534},
    {"name": "Transition", "size": 9201},
    {"name": "Transitioner", "size": 19975},
    {"name": "TransitionEvent", "size": 1116},
    {"name": "Tween", "size": 6006}
   ]
  },
  {
   "name": "data",
   "children": [
    {
     "name": "converters",
     "children": [
      {"name": "Converters", "size": 721},
      {"name": "DelimitedTextConverter", "size": 4294},
      {"name": "GraphMLConverter", "size": 9800},
      {"name": "IDataConverter", "size": 1314},
      {"name": "JSONConverter", "size": 2220}
     ]
    },
    {"name": "DataField", "size": 1759},
    {"name": "DataSchema", "size": 2165},
    {"name": "DataSet", "size": 586},
    {"name": "DataSource", "size": 3331},
    {"name": "DataTable", "size": 772},
    {"name": "DataUtil", "size": 3322}
   ]
  }
 ]
}

참고 자료
1. 공식 수첩
2.Collapsible Tree
3.Radial Tree