D3 Treemap Eltern und Kinder

Question

Versuchen, dieses Beispiel http://bl.ocks.org/hemulin/3247757 der Treemap zu verstehen, die eine Zoom-Funktion verwendet. Momentan verwendet die Treemap die Kinder um auf Stufe 0 angezeigt zu werden. Ich versuche sie so zu ändern, dass sie Eltern auf Level 0 anzeigen können und wenn sie angeklickt werden, werden die Kinder auf Level 1 angezeigt.

I ' habe ein Treemap-Beispiel angeschaut, aber verstehe sie nicht ruhig. Ich erwarte nicht, dass jemand das für mich tut. Nur ein Punkt in die richtige Richtung wäre großartig.

Mein Code:

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/

Vielen Dank im Voraus.

Answer 1

Geändert cell.text (Funktion (d) {return d.name;}) zu cell.text (Funktion (d) {return d.parent.name;}). Dies erhält jetzt den Namen des Elterns anstelle der Kinder.