I use a d3.hierarchy together with d3.partition to setup a sunburst chart. I set the value and the size with hierarchy.count() (which counts the children and set the count as value for each node) in order to equally size the sunburst chart on each level.

[![parcel](https://i.stack.imgur.com/d27JJ.png)](https://i.stack.imgur.com/d27JJ.png)

Is it possible to enlarge only one section of the sunburst chart on hover (without changing its position)? If I use e.g. transform scale(1.5) also the position is shifted towards the outer bounds of the sunburst chart.

Edit://

I used this code to generate the sunburst arcs:

```
const arc = d3.arc<d3.HierarchyRectangularNode<any>>()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
            .padRadius(width / 4)
            .innerRadius(d => d.y0)
            .outerRadius(d => d.y1 - 1)

```

if i apply the values in the suggested method:

```
                    const ringInnerRadius = i.y0;
                    const ringOuterRadius = i.y1 -1;

                    const ringMidRadius = (ringInnerRadius + ringOuterRadius) / 2;

                    const sectorStartAngle = i.x0;
                    const sectorEndAngle = i.x1;
                    const sectorMidAngle = (sectorStartAngle + sectorEndAngle) / 2;

                    const scale = 1.5;

                    const transX = (1-scale) * ringMidRadius * Math.cos(sectorMidAngle);
                    const transY = (1-scale) * ringMidRadius * Math.sin(sectorMidAngle);

```

I come up with the following issue. Here you see the first level from the center, which is shifted and turned right away from the center:

[![enter image description here](https://i.stack.imgur.com/6u9X9.png)](https://i.stack.imgur.com/6u9X9.png)