CODEWITHSUNDEEP
javascriptd3.js
3gwebtrain
3gwebtrain

Reputation: 15293

d3.js - how to arrange the `squre` box around the `circle` properly

I am trying to arrange the squares around the circle but i am unable to get the correct output.

Can any one help me?

// 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>
I am looking the output like this:

expecting result

Upvotes: 0

Views: 905

Answers (2)

gvmani
gvmani

Reputation: 1600

A sample code to work with. I have assumed 8 nodes to be plotted so that the circle can be divided into 8 segments. Each square to placed at the distance of Pi/4 radians. You can compute the x,y as xSin , y Cos. Then you will need to transform the rectangle to centre at x,y rather than the top left corner.

// 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>

Upvotes: 3

Sid Shukla
Sid Shukla

Reputation: 1030

Here's a fiddle. Okay, so this was basically some pixel level trial-and-error translate manipulation. This is for node.

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

and this for rect:

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

Upvotes: 0

Related Questions