javascript - 进入和悬停时的 D3 转换(圆环图)

Question

尽管围绕这个主题已经有很多问题，但我仍然无法正确回答。
我正在绘制这样的圆环图:

const svg = d3.select(svgRef.current);

        const size = 500;
        const radius = size / 2;
;
        svg.attr("viewBox", [-size / 2, -size / 2, size, size]);

        const pie = d3.pie()
            .padAngle(0.02)
            .sort(null)
            .value(d => d.value);

        const arc =  d3.arc()
            .innerRadius(radius * 0.67)
            .outerRadius(radius - 1);

        const color = d3.scaleOrdinal()
            .domain(data.map(d => d.name))
            .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());

        const arcs = pie(data);

        svg.selectAll("path")
            .data(arcs)
            .join("path")
            .attr("fill", d => color(d.data.name))
            .transition()
                .delay((_,i) => i * 500)
                .duration(500)
                .attrTween('d', (d) => {
                    const i = d3.interpolate(d.startAngle+0.1, d.endAngle);
                    return (t) => {
                        d.endAngle = i(t); 
                        return arc(d)
                        }
                    }); 

图表按预期进行动画处理。问题是:我希望分割在悬停时扩展一点。我怎么做？.on('mouseover', ...)具体在哪里走？我知道我需要另一个 attrTween，但我不知道如何。
非常感谢!
编辑:
我现在找到了一种方法，但我仍然想知道是否有更好的方法来做到这一点？

const svg = d3.select(svgRef.current);

        const size = 500;
        const radius = size / 2;
;
        svg.attr("viewBox", [-size / 2, -size / 2, size, size]);

        const pie = d3.pie()
            .padAngle(0.02)
            .sort(null)
            .value(d => d.value);

        const initialArc = d3.arc()
            .innerRadius(radius * 0.67)
            .outerRadius(radius - 20);

        const transformedArc = d3.arc().innerRadius(radius * 0.67);

        const color = d3.scaleOrdinal()
            .domain(data.map(d => d.name))
            .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());

        const arcs = pie(data);

        function arcTween(nextOuterRadius, currentOuterRadius) {
            return function() {
              d3.select(this).transition().duration(500).attrTween("d", function(d) {
                const i = d3.interpolate(currentOuterRadius, nextOuterRadius);
                return (t) => { d.outerRadius = i(t); return transformedArc(d); };
              });
            };
          }

        svg.selectAll("path")
            .data(arcs)
            .join("path")
            .attr("fill", d => color(d.data.name))
            .on("mouseover", arcTween(radius, radius - 20))
            .on('mouseout', arcTween(radius - 20, radius))
            .transition()
                .delay((_,i) => i * 500)
                .duration(500)
                .attrTween('d', (d) => {
                    const i = d3.interpolate(d.startAngle+0.1, d.endAngle);
                    return (t) => {
                        d.endAngle = i(t); 
                        return initialArc(d)
                        }
                    });

Answer 1

如果您尝试将效果添加到所有 path元素，你可以把它放在 transition 之前或者将选择保存到变量并分别附加转换和鼠标悬停事件。

svg.selectAll("path")
    ... // Your existing code
    .on('mouseover', function () {
        svg.selectAll('[YOUR_ELEMENTS]')
            .transition()
    });
   .transition()
   ... // initial transition

或者

let pies = svg.selectAll("path")
    ... // Your existing code
    .on('mouseover', function () {
        svg.selectAll('[YOUR_ELEMENTS]')
            .transition()
    });
pies.transition()
    ... // initial transition
pies.on('mouseover', function () {
        svg.selectAll('[YOUR_ELEMENTS]')
            .transition()
       });