Rotation of the whole layout

Question

Hi how can I rotate this? I mean I want to rotate whole layout like here:

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

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

I don't know where should I begin

Answer 1

Using the code in your link, only wrapped in a group (line 21), then apply the rotation with:

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

More info about transform attribute, here and here.

Full example:

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>