D3 Treemap 확대/축소

Question

나는이 d3 treemap 확대/축소를 만들려고 노력하고 있지만 그것으로 어려움을 겪고있는 것 같습니다. 나는 계속 "treemap.nodes가 함수가 아닙니다"라는 오류가 발생합니다. 어떤 도움을 주시면 감사하겠습니다

var data = 
    { 
     "name" : "Max", 
     "value": 100, 
     "children": 
     [ 
      { 
      "name": "A", 
      "value": 75, 
      "children": [ 
       { "name": "Alpha", "result": 20}, 
       { "name": "Aplha 2", "result": 40}, 
       { "name": "Aplha 3", "result": 35} 
      ] 
      }, 
      { 
      "name": "B", 
      "value": 75, 
      "children": [ 
       {"name": "Bravo", "result": 80}, 
       {"name": "Bravo 2", "result": 20}, 
       {"name": "Bravo 3", "result": 33} 
      ] 
      }, 
      { 
      "name": "C", 
      "value": 75, 
      "children": [ 
       {"name": "Charle", "result": 84}, 
       {"name": "Charle 2", "result": 43}, 
       {"name": "Charle 3", "result": 24} 
       ] 
      } 
     ] 
    } 
    var margin = {top: 20, right: 0, bottom: 0, left: 0}, 
     width = 960, 
     height = 500 - margin.top - margin.bottom, 
     formatNumber = d3.format(",d"), 
     transitioning; 

    var x = d3.scale.linear() 
     .domain([0, width]) 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .domain([0, height]) 
     .range([0, height]); 

    var color = d3.scale.category10(); 
    var svg = d3.select("#chart").append("svg") 
     .attr("width", 1000) 
     .attr("height", 1000); 

    var treemap = d3.layout.treemap() 
     .size([1000, 1000]) 
     .children(function(d, depth) { return depth ? null : d.children; }) 
     .sort(function(a, b) {return a.value - b.value; }) 
     .ratio(height/width * 0.5 * (1 + Math.sqrt(5))) 
     .round(false) 
     .nodes(data); 

    var cells = svg.selectAll(".cell") 
     .data(treemap) 
     .enter() 
     .append("g") 
     .attr("class", "cell") 

    cells.append("rect") 
     .attr("x", function(d){ return d.x}) 
     .attr("y", function(d){ return d.y}) 
     .attr("width", function(d){ return d.dx}) 
     .attr("height", function(d){ return d.dy}) 
     .attr("stroke", "#fff") 
     .attr("fill", function(d){ return d.children ? null : color(d.parent.name);}) 

    cells.append("text") 
     .attr("x", function (d) { return d.x + d.dx /2}) 
     .attr("y", function (d) { return d.y + d.dy /2}) 
     .text(function(d) { return d.children ? null : d.name + d.value;}) 

    var grandparent = svg.append("g") 
     .attr("class", "grandparent"); 

    grandparent.append("rect") 
     .attr("y", -margin.top) 
     .attr("width", width) 
     .attr("height", margin.top); 

    grandparent.append("text") 
     .attr("x", 6) 
     .attr("y", 6 - margin.top) 
     .attr("dy", ".75em"); 

    var root = sample_data; 
    initialize(root); 
    accumulate(root); 
    layout(root); 
    display(root); 

    function initialize(root) { 
     root.x = root.y = 0; 
     root.dx = width; 
     root.dy = height; 
     root.depth = 0; 
    } 

    function accumulate(d) { 
     return d.children 
      ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0) 
      : d.value; 
    } 

    function layout(d) { 
     if (d.children) { 
      treemap.nodes({children: d.children}); 
      d.children.forEach(function(c) { 
      c.x = d.x + c.x * d.dx; 
      c.y = d.y + c.y * d.dy; 
      c.dx *= d.dx; 
      c.dy *= d.dy; 
      c.parent = d; 
      layout(c); 
      }); 
     } 
     } 

    function display(d) { 
     grandparent 
      .datum(d.parent) 
      .on("click", transition) 
      .select("text") 
      .text(name(d)); 

    var g1 = svg.insert("g", ".grandparent") 
     .datum(d) 
     .attr("class", "depth"); 

    var g = g1.selectAll("g") 
     .data(d.children) 
     .enter().append("g"); 

    g.filter(function(d) { return d.children; }) 
     .classed("children", true) 
     .on("click", transition); 

    g.selectAll(".child") 
     .data(function(d) { return d.children || [d]; }) 
     .enter().append("rect") 
     .attr("class", "child") 
     .call(rect); 

    g.append("rect") 
     .attr("class", "parent") 
     .call(rect) 
     .append("title") 
     .text(function(d) { return formatNumber(d.value); }); 

    g.append("text") 
     .attr("dy", ".75em") 
     .text(function(d) { return d.name; }) 
     .call(text); 

    function transition(d) { 
     if (transitioning || !d) return; 
     transitioning = true; 

     var g2 = display(d), 
      t1 = g1.transition().duration(750), 
      t2 = g2.transition().duration(750); 

     x.domain([d.x, d.x + d.dx]); 
     y.domain([d.y, d.y + d.dy]); 

     svg.style("shape-rendering", null); 

     svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; }); 

     g2.selectAll("text").style("fill-opacity", 0); 

     t1.selectAll("text").call(text).style("fill-opacity", 0); 
     t2.selectAll("text").call(text).style("fill-opacity", 1); 
     t1.selectAll("rect").call(rect); 
     t2.selectAll("rect").call(rect); 

     t1.remove().each("end", function() { 
     svg.style("shape-rendering", "crispEdges"); 
     transitioning = false; 
     }); 
    } 

    return g; 
    } 

    function text(text) { 
    text.attr("x", function(d) { return x(d.x) + 6; }) 
     .attr("y", function(d) { return y(d.y) + 6; }); 
    } 

    function rect(rect) { 
    rect.attr("x", function(d) { return x(d.x); }) 
     .attr("y", function(d) { return y(d.y); }) 
     .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); }) 
     .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); }); 
    } 

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

    function name(d) { 
    return d.parent 
     ? name(d.parent) + "." + d.name 
     : d.name; 
    } 

: 나는

https://bost.ocks.org/mike/treemap/ 다음은 내 코드입니다, 여기에 마이크 Bostock의 예를 따르도록 노력했다.

Answer 1

.nodes() 함수는 다른 많은 함수처럼 트리 맵을 반환하지 않지만 대신 노드 배열을 반환하므로 treemap= d3.layout.treemap(). [...] .nodes(data)을 가질 수 없습니다. 대신 다음을 사용하십시오.

var treemap = d3.layout.treemap() 
    .size([1000, 1000]) 
    .children(function(d, depth) { return depth ? null : d.children; }) 
    .sort(function(a, b) {return a.value - b.value; }) 
    .ratio(height/width * 0.5 * (1 + Math.sqrt(5))) 
    .round(false); 
var nodes = treemap.nodes(data);