d3.js Donut chart only draws a single cutoff slice inside a react component

Question

I have made a piechart in javascript and I'm now trying to bring it inside a react component. However, it only draws a single slice and that one isn't even complete it's cutoff. Here are images of the cut off slice from the react component and how it looks just rendering in html.

I am not sure why.

This is my function drawing it:

  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)); 

It is pretty much the same except that I'm using a svg view box and I pass width and height as props instead of hardcoding it. It draws perfectly fine from a javascript.

Thanks for any hints and tips you are able and take the time to give!

Best Regards,

Oliver

Answer 1

The issue was with the view box (moving the origin from 0,0 to -width, -height worked), a workaround for some reason I have had to copy intermediate variables

const pwidth = width
const pheight = height

and use these instead of width. Then I don't need to adjust the viewboxs origin. Which is a bit strange to say the least. I won't accept this answer here as I have no idea why. But adding it so someone else may find an answer if they're looking for it.