D3 Treemap 부모 및 자식

Question

줌 기능을 사용하는 트리 맵의 예제 http://bl.ocks.org/hemulin/3247757을 이해하려고합니다. 현재 트리 맵은 레벨 0에서 표시하기 위해 자식을 사용합니다. 레벨 0에서 부모를 표시 할 수 있도록 수정하려고하고 클릭하면 레벨 1에서 자식을 확대하여 표시합니다.

' Treemap 예제를 보았지만 조용히 이해하지 못했습니다. 나는 누군가 나를 위해 이것을 할 것으로 기대하지 않는다. 바른 방향으로 나아가는 것만으로도 좋습니다.

내 코드 : 사전에

var w = 1280 - 80, 
    h = 800 - 180, 
    x = d3.scale.linear().range([0, w]), 
    y = d3.scale.linear().range([0, h]), 
    color = d3.scale.category10(), 
    root, 
    node; 

    var treemap = d3.layout.treemap() 
     .round(false) 
     .size([w, h]) 
     .sticky(true) 
     .padding([10, 0, 0, 0]) 
     .value(function(d) { return d.size; }); 

    var svg = d3.select("#body").append("div") 
     .attr("class", "chart") 
     .style("width", w + "px") 
     .style("height", h + "px") 
     .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .append("svg:g") 
     .attr("transform", "translate(.5,.5)"); 


     node = root = pathJson; 

     var nodes = treemap.nodes(root) 
      .filter(function(d) { return !d.children; }); 

     var cell = svg.selectAll("g") 
      .data(nodes) 
      .enter().append("svg:g") 
      .attr("class", "cell") 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
      .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); }); 

     cell.append("svg:rect") 
      .attr("width", function(d) { return d.dx - 1; }) 
      .attr("height", function(d) { return d.dy - 1; }) 
      .style("fill", function(d) { return color(d.parent.name); }); 

     cell.append("svg:text") 
      .attr("x", function(d) { return d.dx/2; }) 
      .attr("y", function(d) { return d.dy/2; }) 
      .attr("dy", ".35em") 
      .attr("text-anchor", "middle") 
      .text(function(d) { return d.name; }) 
      .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; }); 

     d3.select(window).on("click", function() { zoom(root); }); 

     d3.select("select").on("change", function() { 
     treemap.value(this.value == "size" ? size : count).nodes(root); 
     zoom(node); 
     }); 


    function size(d) { 
     return d.size; 
    } 

    function count(d) { 
     return 1; 
    } 

    function zoom(d) { 
     //alert(d.name); 
     var kx = w/d.dx, ky = h/d.dy; 
     x.domain([d.x, d.x + d.dx]); 
     y.domain([d.y, d.y + d.dy]); 

     var t = svg.selectAll("g.cell").transition() 
      .duration(d3.event.altKey ? 7500 : 750) 
      .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); 

     t.select("rect") 
      .attr("width", function(d) { return kx * d.dx - 1; }) 
      .attr("height", function(d) { return ky * d.dy - 1; }) 

     t.select("text") 
      .attr("x", function(d) { return kx * d.dx/2; }) 
      .attr("y", function(d) { return ky * d.dy/2; }) 
      .style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; }); 
      //.style("font-size", function(d) { return kx * d.dx > d.w ? "20px" : "12px";}); 

     node = d; 
     d3.event.stopPropagation(); 
    } 

https://jsfiddle.net/noobiecode/9ev9qjt3/1/

많은 감사합니다.

Answer 1

cell.text (function (d) {return d.parent.name;})에 대한 cell.text (function (d) {return d.name;})가 변경되었습니다. 이것은 이제 자식 대신 부모의 이름을 얻습니다.