I am trying to draw a circle equally segmented into an indeterminate amount of "quadrants" based on the length of Array "categories" using the JavaScript library D3.js. An example is linked below, with 4 quadrants.
I am struggling with the method of drawing the grid lines dividing each of the "quadrants". My current approach is to draw a line per unique category, emanating from the origin (the center of the circle) to a point on the circumference of the circle. However, I am unsure as to (1) the method by which I can obtain the coordinates of the points on the circumference and (2) whether there is a better approach.
As of right now, I have the following code.
var svg = d3.select("svg#radar")
var radar = svg.append("g");
var grid = radar.append("g");
categories = Array(["cat_1", "cat_2", "cat_3"])
function getX1 (i) {
//get necessary coordinate
}
function getY1 (i) {
//get necessary coordinate
}
for (var i; i < categories.length; i++) {
grid.append("line")
.attr("x1", getX1(i))
.attr("y1", getY1(i))
.attr("x2", 0)
.attr("y2", 0)
.style("stroke", config.colors.grid)
.style("stroke-width", 1);
}
Any help would be greatly appreciated.
I figured it out.
Just use trigonometry (sin and cosine) like so:
var svg = d3.select("svg#radar")
var radar = svg.append("g");
var grid = radar.append("g");
categories = Array(["cat_1", "cat_2", "cat_3"])
function getX1 (i) {
var deg = (360 / categories.length) * i;
var percent_of_circle = deg / 360
var radians = percent_of_circle * 2 * Math.PI
return 400 * Math.cos(radians);
}
function getY1 (i) {
var deg = (360 / categories.length) * i;
var percent_of_circle = deg / 360
var radians = percent_of_circle * 2 * Math.PI
return 400 * Math.sin(radians); }
for (var i; i < categories.length; i++) {
grid.append("line")
.attr("x1", getX1(i))
.attr("y1", getY1(i))
.attr("x2", 0)
.attr("y2", 0)
.style("stroke", config.colors.grid)
.style("stroke-width", 1);
}