D3js: Enlarge section of sunburst on hover-CodePudding

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.

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:

CodePudding user response：

If you know the distance and angle of the center of the sector, then you can scale the sector by 1.5 and then translate it back to where it belongs.

const ringInnerRadius = ...;
const ringOuterRadius = ...;
const ringMidRadius = (ringInnerRadius   ringOuterRadius) / 2;

const sectorStartAngle = ...;
const sectorEndAngle = ...;
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);

sector.attr("transform", `translate(${transX} ${transY}) scale(1.5)`)

CodePudding user response：

This is not resolved, and I do not get it working. Now, I use a different technique named sunburst with distortion to highlight different parts. I updated the code from https://bl.ocks.org/mbostock/1306365 (from the all famous Mike Bostock) for d3 v4 and posted the converted code as an answer to my question here: d3js Sunburst with Distortion > v4