0
314
VistasEl gráfico de anillos de d3.js solo dibuja un segmento de corte único dentro de un componente de reacción
Hice un gráfico circular en javascript y ahora estoy tratando de incorporarlo a un componente de reacción. Sin embargo, solo dibuja una sola rebanada y esa ni siquiera está completa, es un corte. Aquí hay imágenes de la porción cortada del componente de reacción y cómo se ve simplemente renderizándose en html.
No estoy seguro por qué.
Esta es mi función dibujándola:
function drawDonut(inputData: DealNumbers[]) { const radius = Math.min(width, height) / 2; const color = d3.scaleOrdinal(d3.schemeCategory10); const arc = d3.arc() .outerRadius(radius - margin.top) .innerRadius(radius - radius * 0.5); const pie = d3 .pie() .padAngle(0) .value((d) => d.deals); svg .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${(width / 2) + margin.left}, ${(height / 2) + margin.top})`); svg .selectAll('.arc') .data(pie(inputData)) .enter() .append('g') .attr('class', 'arc') .append('path') .attr('d', arc) .style('fill', (d) => color(d.data.name)); Es más o menos lo mismo, excepto que estoy usando un svg view box y paso el width y la height como accesorios en lugar de codificarlo. Se dibuja perfectamente bien desde un javascript.
¡Gracias por cualquier sugerencia y consejo que pueda y tome el tiempo para dar!
Saludos,
oliver
1 Respuestas
Responde la pregunta0
El problema fue con el cuadro de vista (mover el origen de 0,0 a -ancho, -alto funcionó), una solución por alguna razón tuve que copiar variables intermedias
const pwidth = width const pheight = height y use estos en lugar de width . Entonces no necesito ajustar el origen de los viewboxes. Lo cual es un poco extraño por decir lo menos. No aceptaré esta respuesta aquí porque no tengo idea de por qué. Pero agregándolo para que alguien más pueda encontrar una respuesta si la está buscando.