Estoy tratando de dibujar un círculo igualmente segmentado en una cantidad indeterminada de "cuadrantes" según la longitud de las "categorías" de Array usando la biblioteca de JavaScript D3.js. Un ejemplo está vinculado a continuación, con 4 cuadrantes.
Estoy luchando con el método de dibujar las líneas de cuadrícula que dividen cada uno de los "cuadrantes". Mi enfoque actual es dibujar una línea por categoría única, que emana desde el origen (el centro del círculo) hasta un punto en la circunferencia del círculo. Sin embargo, no estoy seguro de (1) el método por el cual puedo obtener las coordenadas de los puntos en la circunferencia y (2) si existe un mejor enfoque.
A partir de ahora, tengo el siguiente código.
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); }Cualquier ayuda sería muy apreciada.
Me lo imaginé.
Simplemente use trigonometría (sen y coseno) así:
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); }