Supongamos que quisiéramos hacer un objeto visual similar a una lista. Establecer la lógica y para los círculos puede ser tan simple como:

 var data = [0,1,2,3,4,5,6,7,8,9]; var yScale = d3.scaleLinear() .range([height,0]) .domain([0,9]); svg.selectAll(null) .data(data) .enter() .append('circle') .attr('cy', function(d) { return yScale(d) }) .attr('cx', 100) .attr('r', 10) .style('fill', "#a6a6a6");

Sin embargo, supongamos que quisiéramos optar por algunos puntos de estilo y organizar los círculos no en forma de bloques/tabulares, sino alrededor de un círculo o un arco. Tenía este resultado en mente (solo preocupado por los círculos exteriores):

Si bien creo que d3 tiene funciones trigonométricas, nunca las he visto usar en coordenadas de píxeles. Me imagino que el pseudocódigo sería algo así como:

 var semiCircleScale = d3.????? .range([250 degrees, 110 degrees]) .domain([0,9]); svg.selectAll(null) .data(data) .enter() .append('circle') .attr('cy', function(d) { return semiCircleScale(d) }) .attr('cx', 100) .attr('r', 10) .style('fill', "#a6a6a6");

Pregunta

¿Alguien está familiarizado con el uso de escalas de círculo/arco para usar con la lógica x, y para agregar formas? ¿O hay una manera más fácil/menos intensiva en matemáticas?