d3.js - 如何正确排列“圆形”周围的“方形”框

Question

我正在尝试在circle 周围安排squares，但我无法获得正确的输出。

谁能帮帮我？

// largely based on http://bl.ocks.org/4063550

// some made-up data
var data = [2,2,2,2,2,2];

// tree-ify our fake data
var dataTree = {
    children: data.map(function(d) { return { size: d }; })
};

// basic settings
var w = 300,
    h = 300,
    maxRadius = 75;


// size scale for data
var radiusScale = d3.scale.sqrt().domain([0, d3.max(data)]).range([0, maxRadius]);

// determine the appropriate radius for the circle
var roughCircumference = d3.sum(data.map(radiusScale)) * 2,
    radius = roughCircumference / (Math.PI * 2);

// make a radial tree layout
var tree = d3.layout.tree()
    .size([360, radius])
    .separation(function(a, b) {
        return radiusScale(a.size) + radiusScale(b.size);
    });

// make the svg
var svg = d3.select("body").append("svg")
    .attr("width", w )
    .attr("height", h )
    .append("g")
    .attr("transform", "translate(" + (w / 2 ) + "," + (h /2) + ")");

var c = svg.append('circle').attr({r:75})

// apply the layout to the data
var nodes = tree.nodes(dataTree);

// create dom elements for the node
var node = svg.selectAll(".node")
      .data(nodes.slice(1)) // cut out the root node, we don't need it
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
          console.log(d.x);
          return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")";
      })

node.append("rect")
    .attr({
    width: 25,
    height:25,
    fill : 'red',
    "transform":function(d) {
         return "rotate(" + (-1 * d.x + 90) + ") translate(" +0+ ")";
      }
});
node.append("text")
.attr({"transform":function(d) {
         return "rotate(" + (-1 * d.x + 90) + ")";
      },
       "text-anchor": "middle"
      })
.text("testing a word");

svg {
    border:1px solid gray;
}

circle {
   fill: steelblue;
   stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我正在寻找这样的输出：

Answer 1

可使用的示例代码。 我假设要绘制 8 个节点，以便将圆分成 8 段。每个正方形放置在 Pi/4 弧度的距离处。您可以将 x,y 计算为 xSin , y Cos。然后您需要将矩形转换为以 x,y 为中心而不是左上角。

// largely based on http://bl.ocks.org/4063550

// some made-up data
var data = [2,2,2,2,2,2,2,2];

// tree-ify our fake data
var dataTree = {
    children: data.map(function(d) { return { size: d }; })
};

// basic settings
var w = 300,
    h = 300,
    maxRadius = 75;


// size scale for data
var radiusScale = d3.scale.sqrt().domain([0, d3.max(data)]).range([0, maxRadius]);

// determine the appropriate radius for the circle
var roughCircumference = d3.sum(data.map(radiusScale)) * 2,
    radius = roughCircumference / (Math.PI * 2);

// make a radial tree layout
var tree = d3.layout.tree()
    .size([360, radius])
    .separation(function(a, b) {
        return radiusScale(a.size) + radiusScale(b.size);
    });

// make the svg
var svg = d3.select("body").append("svg")
    .attr("width", w )
    .attr("height", h )
    .append("g")
    .attr("transform", "translate(" + (w / 2 ) + "," + (h /2) + ")");

var c = svg.append('circle').attr({r:75})
var r = 75;
// apply the layout to the data
var nodes = tree.nodes(dataTree);

// create dom elements for the node
var node = svg.selectAll(".node")
      .data(nodes.slice(1)) // cut out the root node, we don't need it
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d,i) {     		  
          return "translate(" + (r * Math.sin(Math.PI * i * 0.25)) + "," + (r * Math.cos(Math.PI * i * 0.25)) + ")";
      })

node.append("rect")
    .attr({
    width: 25,
    height:25,
    fill : 'red',
    "transform":function(d) {
         return "translate(" +(-12.5)+ ","+ (-12.5) + ")";
      }
});
node.append("text")
.attr({"transform":function(d) {
         return "rotate(" + (-1 * d.x + 90) + ")";
      },
       "text-anchor": "middle"
      })
.text("testing a word");

svg {
    border:1px solid gray;
}

circle {
   fill: steelblue;
   stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

这是fiddle。 好的，所以这基本上是一些像素级的反复试验translate 操作。这是给node的。

.attr("transform", function(d) {
          console.log(d.x);
          return "rotate(" + (d.x - 90) + ") translate(" + (d.y - 65 ) + ")";
      })

这是rect：

.attr({
    width: 25,
    height:25,
    fill : 'red',
    "transform":function(d) {
         return "rotate(" + -(d.x - 90) + ") translate(" +(-10)+ ","+ (-10) + ")";
      }
});