0
297
VistasAdición de varios grupos al gráfico D3 radial
Lo siento 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 los cuales contiene 3 valores separados. Como puede ver, el gráfico radial se agrupa en 5 secciones (con un espacio) y luego cada sección contiene los 3 valores separados como gráficos de barras.
Aquí hay un violín js: https://jsfiddle.net/kpu5o7v2/ Y mis datos:
[ { 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 secciones para que se correspondan con el valor new_data.name. es decir. los grupos más amplios. Entonces puedo diseñarlos individualmente Entonces, por ejemplo, para "John":
- el ángulo de inicio es 0
- el ángulo final es el mismo ángulo final que la sección azul de John
- el radio es un número > la subsección más grande.
A continuación se muestra un ejemplo (si le diera un golpe a este grupo):
1 Respuestas
Responde la pregunta0
Descubrí la respuesta a esto:
- Necesitamos agregar una nueva g al SVG con el mismo new_data nuevamente
- Cree un nuevo objeto de arco para los nombres ("John", "Spencer", etc.) en lugar de las teclas ("rojo", "verde", "azul")
- El radio es y(ymax) donde ymax es el valor más grande en todos los datos
- el ángulo de inicio es solo x0 (nombre) (en una escala de 0 a 2PI)
- el ángulo final es el mismo que el anterior + el ancho. Que es circunferencia/número de nombres.
let arc2 = d3.arc() .innerRadius(innerRadius) .outerRadius((d) => { return y(ymax); }) .startAngle(d => { return x0(d.name) }) .endAngle(d => { //let circumference = 2* Math.PI; //let bandwidth = circumference/names.length; let endAngle = x0(d.name) + (x0.bandwidth() * 0.8); return endAngle; }) .padAngle(0.01) .padRadius(innerRadius); svg.append("g") .selectAll("path") .data(new_data) .enter() .append("path") .attr('fill', d => { return "none"; }) .attr("stroke", "#333") .attr("stroke-width", 2) .attr("d", arc2);Nuevo violín JS: https://jsfiddle.net/kpu5o7v2/1/
Resultado: 