使用d3樹形圖上去繼續點擊父節點上的子節點

，但能直接到達子節點直接
高清城市，某某市和市農行上顯示的映像樹

data.json

{ 

"name":"country", 
"children": 
[ 
    { 
    "name": "Verizona State", 
     "value": 100, 
    "children": [ 
     { 
      "name": "xyz city", 
      "value": 30 
     }, 
     { 
      "name": "abc city", 
      "value": 40 
     } 
    ] 
    }, 
    { 
     "name": "New Jersey", 
     "value": 50, 
     "children": [ 
      { 
       "name": "def city", 
       "value": 30 
      } 
     ] 
    } 
] 
}

的index.html

<html> 
<script src="http://d3js.org/d3.v3.min.js"></script> 

<body> 
<div id="heatmap"> 
<script> 

    var color = d3.scale.category10(); 
    var canvas = d3.select("#heatmap").append("svg") 
       .attr("width",500) 
       .attr("height",500); 

    d3.json("data.json" ,function(data){ 

     var treemap=d3.layout.treemap() 
     .size([500,500]) 
     .nodes(data); 

     console.log(treemap); 


    var cells = canvas.selectAll(".cell") 
       .style("position", "relative") 
       .data(treemap) 
       .enter() 
       .append("g") 
       .attr("class","cell") 
       .attr("stroke","#fff"); 

     cells.append("rect") 
     .attr("x" , function(d) { console.log(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("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;}) 
    }) 
</script> 
</div> 
</body> 
</html>

我想要一個方法來顯示第一個 Verizona州和新澤西州的樹形圖

並點擊verizona狀態以獲得xyz城市和abc城市樹形圖

請建議更改。

來源

2015-11-07 userRaj

的這個例子中，你可以添加你的造型也是這個問題，目前的版本不顯示樹正確 – Sajeetharan

我也做了造型權 – userRaj

我解決了使用麥克 http://bost.ocks.org/mike/treemap/

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script> 
<script> 

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 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); 

var svg = d3.select("#chart").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"); 

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"); 

d3.json("flare.json", function(root) { 
    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; 
    } 

    // Aggregate the values for internal nodes. This is normally done by the 
    // treemap layout, but not here because of our custom implementation. 
    // We also take a snapshot of the original children (_children) to avoid 
    // the children being overwritten when when layout is computed. 
    function accumulate(d) { 
    return (d._children = d.children) 
     ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0) 
     : d.value; 
    } 

    // Compute the treemap layout recursively such that each group of siblings 
    // uses the same size (1×1) rather than the dimensions of the parent cell. 
    // This optimizes the layout for the current zoom state. Note that a wrapper 
    // object is created for the parent node for each group of siblings so that 
    // the parent’s dimensions are not discarded as we recurse. Since each group 
    // of sibling was laid out in 1×1, we must rescale to fit using absolute 
    // coordinates. This lets us use a viewport to zoom. 
    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); 

     // Update the domain only after entering new elements. 
     x.domain([d.x, d.x + d.dx]); 
     y.domain([d.y, d.y + d.dy]); 

     // Enable anti-aliasing during the transition. 
     svg.style("shape-rendering", null); 

     // Draw child nodes on top of parent nodes. 
     svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; }); 

     // Fade-in entering text. 
     g2.selectAll("text").style("fill-opacity", 0); 

     // Transition to the new view. 
     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); 

     // Remove the old node when the transition is finished. 
     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 name(d) { 
    return d.parent 
     ? name(d.parent) + "." + d.name 
     : d.name; 
    } 
}); 

</script> 
<script> 



</script>

來源

2015-11-28 05:24:25 userRaj

使用d3樹形圖上去繼續點擊父節點上的子節點

回答

相關問題