レイアウト全体の回転

Question

こんにちはどうすればいいですか？私はここのようなレイアウト全体を回転させたい意味：あなたのリンクのコードを使用して

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

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

私は始めるべきである私にはわからない

Answer 1

は、唯一groupに包まれました（ 21行）、次いで回転を適用します。transformのattrについて

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

詳細情報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>