Question

我有一些问题试图让我的树形图在窗口调整大小时可调整大小：我从这个例子开始： https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap_code.php

这是我的resize（）函数，除了删除图形，重新定义div＃graph的宽度和高度，然后重新运行上面链接中可以看到的init代码。（drawGraph（）执行d3 treemap工作，json是包含数据的全局var）：

function resize(){
    d3.select("#graph svg")
   .remove();

    margin = {top: 50, right: 0, bottom: 0, left: 0},
    width = $('#graph').innerWidth(),
    height = $('#graph').height() - margin.top - margin.bottom

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

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


    treemap = d3.layout.treemap()
    .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)
    .value(function(d) {  return d.size; })

    svg = d3.select("#graph").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("margin-left", -margin.left + "px")
    .style("margin.right", -margin.right + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .style("shape-rendering", "crispEdges");

    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", "30px")


drawGraph(json)

}

问题在于：图表是否正确重绘，但没有任何孩子！我的树形图具有高度3，在调整大小之后它就像所有节点都成为叶子一样。

解我编辑了accumulate函数：

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

  }

在窗口调整大小事件中，我更新svg元素的宽度和高度并重新执行： initialize()，accumulate()，layout()，display()

D3 Zoomable Treemap调整大小

0 个答案: