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":
A continuación se muestra un ejemplo (si le diera un golpe a este grupo):
Descubrí la respuesta a esto:
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/