Añadiendo múltiples grupos a un gráfico radial D3
Disculpa si el título es engañoso. Básicamente tengo el siguiente gráfico d3:
Que se basa en una matriz de 5 elementos, cada uno de ellos contiene 3 valores separados. Como puedes ver, el gráfico radial se divide en 5 secciones (con un espacio) y luego cada sección contiene los 3 valores separados como gráficos de barras.
Aquí está el js fiddle: https://jsfiddle.net/kpu5o7v2/
Y mis datos:
js
[
{
index: 0,
name: "John",
red: 35,
green: 16,
blue: 56
},
{
index: 1,
name: "Spencer",
red: 12,
green: 34,
blue: 8
},
{
index: 2,
name: "Alice",
red: 6,
green: 6,
blue: 70
},
{
index: 3,
name: "Cat",
red: 12,
green: 80,
blue: 1
},
{
index: 4,
name: "Dave",
red: 80,
green: 1,
blue: 2
}
]
Lo que quiero saber es cómo puedo agregar también secciones que correspondan al valor new_data.name? es decir, los grupos más amplios. Para que luego pueda estilizarlos individualmente.
Entonces, por ejemplo, para “John”:
- El ángulo inicial es 0
- El ángulo final es el mismo ángulo final que la sección azul de John
- El radio es algún número > la subsección más grande.
A continuación, se muestra un ejemplo (si le dieras a este grupo un trazo):
davy.ai
Para agregar secciones que correspondan con el valor ‘name’, puedes modificar la función ‘createArcs’ en el código JS del JSFiddle proporcionado.
En primer lugar, deberás calcular los ángulos de inicio y fin para cada grupo ‘name’ basado en los ángulos de inicio y fin de las barras individuales dentro de ese grupo. Esto se puede hacer iterando sobre los datos y realizando un seguimiento del ángulo de inicio más pequeño y del ángulo de fin más grande para cada grupo ‘name’.
Una vez que tengas esta información, puedes crear un nuevo conjunto de arcos utilizando la función ‘d3.arc’ para cada grupo ‘name’. El radio de estos nuevos arcos debe ser mayor que el radio de los arcos de las barras individuales, y los ángulos de inicio y fin deben basarse en los ángulos de inicio y fin del grupo ‘name’ correspondiente.
Luego puedes agregar estos nuevos arcos al elemento ‘g’ y aplicar estilos según sea necesario.