整個佈局的旋轉

Question

嗨如何旋轉？我的意思是我要喜歡這裏旋轉整個佈局：

https://zapodaj.net/378132ac3f31d.png.html 

http://bl.ocks.org/seliopou/4127259

我不知道我應該開始

Answer 1

使用您的鏈接代碼，只裹着group（

canvas.attr("transform", function() { 
    return (
    "translate(" + w/2.0 + ", " + h/2.0 + ") " + 
    "rotate(180, " + w/4.0 + ", " + h/4.0 + ")"); 
}); 

更多信息有關transform ATTR：第21行），然後應用旋轉ibute，here和here。

完整的示例：

var w = 640, h = 480; 
 

 
var data = { 
 
    name: "root", 
 
    children: [ 
 
    { name: "1", size: 100 }, 
 
    { name: "2", size: 85 }, 
 
    { name: "3", size: 70 }, 
 
    { name: "4", size: 55 }, 
 
    { name: "5", size: 40 }, 
 
    { name: "6", size: 25 }, 
 
    { name: "7", size: 10 } 
 
    ] 
 
}; 
 

 
var canvas = d3 
 
    .select("#canvas") 
 
    .append("svg:svg") 
 
    .attr("width", w) 
 
    .attr("height", h) 
 
    .append("g"); // here the wrap 
 

 
var nodes = d3.layout 
 
    .pack() 
 
    .value(function(d) { 
 
    return d.size; 
 
    }) 
 
    .size([w, h]) 
 
    .nodes(data); 
 

 
// Get rid of root node 
 
nodes.shift(); 
 

 
canvas 
 
    .selectAll("circles") 
 
    .data(nodes) 
 
    .enter() 
 
    .append("svg:circle") 
 
    .attr("cx", function(d) { 
 
    return d.x; 
 
    }) 
 
    .attr("cy", function(d) { 
 
    return d.y; 
 
    }) 
 
    .attr("r", function(d) { 
 
    return d.r; 
 
    }) 
 
    .attr("fill", "white") 
 
    .attr("stroke", "grey"); 
 

 
canvas.attr("transform", function() { 
 
    return (
 
    "translate(" + w/2.0 + ", " + h/2.0 + ") " + 
 
    "rotate(180, " + w/4.0 + ", " + h/4.0 + ")"); 
 
});

<script src="https://d3js.org/d3.v2.js"></script> 
 
<div id="canvas"></div>