整个布局的旋转答案

【问题标题】：Rotation of the whole layout整个布局的旋转
【发布时间】：2017-05-30 03:56:04
【问题描述】：

您好，我怎样才能旋转这个？我的意思是我想像这里一样旋转整个布局：

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

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

我不知道该从哪里开始

【问题讨论】：

你可以先创建一个fiddle或者codepen，然后改变数据中对象的大小

标签： javascript d3.js

【解决方案1】：

使用链接中的代码，仅包裹在group （第 21 行），然后应用旋转：

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

更多关于transform属性、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>

【讨论】：