与弯曲的边界的多多福饼图表

Question

我正在尝试创建一个带有弯曲末端的圆环图。此图表中包含多个系列。

我还找到了一个类似于我需要的小提琴：jsfiddle.net/freezystem/henr4ozn /

但这是在v3中，我一直在尝试将其转换为v4，但未能呈现图形。

根据评论和复杂性，我已经将上面的jsfiddle转换为v4，我试图将此jsfiddle.net/minnie_mouse/033jrrz8/转换为v4

但我仍然没有获得相同的渲染图像。

    const d3 = this.d3;
    const arcTween = function (transition, newAngle, arc) {
        transition.attrTween('d', function (d) {
            const interpolate = d3.interpolate(d.endAngle, newAngle);

            return function (t) {
                d.endAngle = interpolate(t);
                return arc(d);
            };
        });
    };


    const createCircle = function (svg, outerRadius, innerRadius, color, percent) {
        debugger;
        const ratio = percent / 100;

        const arcBackground = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(2 * Math.PI);

        const pathBackground = svg.append('path')
            .attr('d', arcBackground)
            .style({
                fill: '#585e65',
                opacity: .2
            });

        const arcForeground = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .cornerRadius(20)
            .startAngle(-0.05);

        const pathForeground = svg.append('path')
            .datum({ endAngle: 0 })
            .attr('d', arcBackground)
            .style({
                fill: color
            }).append('text')
            .attr('transform', 'translate(10,10)')
            .text('hi')
            .attr('fill', 'white')
            .attr('font-size', '20px');


        pathForeground.transition()
            .duration(1500)
            .ease('elastic')
            .call(arcTween, ((2 * Math.PI)) * ratio, arcForeground);



        const chart = { path: pathForeground, arc: arcForeground };

        return chart;
    };





    const addStartImage = function (svg, percent, outerRadius) {

        svg.append('text')
            .text(percent + '%')
            .attr('font-size', '10px')
            .attr('font-weight', 'bold')
            .attr('fill', 'white')
            .attr({
                width: 20,
                height: 20,
                transform: 'translate(4,' + (-outerRadius + 20) + ')'
            });

    };




    const w = 300, h = 300;
    let outerRadius = (w / 2);
    const width = 30, gap = 14;

    const innerRadius = outerRadius - 30;

    const color = ['#e90b3a', '#a0ff03', '#1ad5de'];

    const svg = d3.select('#chart')
        .append('svg')
        .attr('width', w)
        .attr('height', h)
        .attr('class', 'shadow')
        .append('g')
        .attr('transform', 'translate(' + w / 2 + ',' + h / 2 + ')'
        );

    const circles = [
        { name: 'activity1', percent: 50, color: '#3e4eb7' },
        { name: 'activity2', percent: 66, color: '#50a7ff' }];



    for (let i = 0; i < circles.length; ++i) {
        if (i > 0) {
            outerRadius = innerRadius - gap;
        }

        circles[i]['chart'] = createCircle(svg, outerRadius, innerRadius, circles[i].color, circles[i].percent);

        addStartImage(svg, circles[i].percent, outerRadius);
    }

Answer 1

Atlast我让它成功运行。这是代码

    const d3 = this.d3;
    const arcTween = function (transition, newAngle, arc) {
        transition.attrTween('d', function (d) {
            const interpolate = d3.interpolate(d.endAngle, newAngle);

            return function (t) {
                d.endAngle = interpolate(t);
                return arc(d);
            };
        });
    };


    const createCircle = function (svg, outerRadius, innerRadius, color, percent) {
        const ratio = percent / 100;

        const arcBackground = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(2 * Math.PI);

        const pathBackground = svg.append('path')
            .attr('d', arcBackground)
            .style({
                fill: '#585e65',
                opacity: .2
            });

        const arcForeground = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .cornerRadius(20)
            .startAngle(-0.05);

        const pathForeground = svg.append('path')
            .datum({ endAngle: 0 })
            .attr('d', arcBackground)
            .style('fill', color);

        pathForeground.append('text')
            .attr('transform', 'translate(10,10)')
            .text('hi')
            .attr('fill', 'white')
            .attr('font-size', '20px');

            pathForeground.transition()
            .duration(2000)
            .transition()
            .ease(d3.easeElastic)
            .call(arcTween, ((2 * Math.PI)) * ratio, arcForeground);



        const chart = { path: pathForeground, arc: arcForeground };

        return chart;
    };





    const addStartImage = function (svg, percent, outerRadius) {

        svg.append('text')
            .text(percent + '%')
            .attr('font-size', '10px')
            .attr('font-weight', 'bold')
            .attr('fill', 'white')
            .attr({
                width: 20,
                height: 20,
                transform: 'translate(4,' + (-outerRadius + 20) + ')'
            });

    };




    const w = 300, h = 300;
    let outerRadius = (w / 2);
    const width = 30, gap = 14;

    const innerRadius = outerRadius - 30;

    const color = ['#e90b3a', '#a0ff03', '#1ad5de'];

    const svg = d3.select('#chart')
        .append('svg')
        .attr('width', w)
        .attr('height', h)
        .attr('class', 'shadow')
        .append('g')
        .attr('transform', 'translate(' + w / 2 + ',' + h / 2 + ')'
        );

    const circles = [
        { name: 'activity1', percent: 50, color: '#3e4eb7' },
        { name: 'activity2', percent: 66, color: '#50a7ff' }];



    for (let i = 0; i < circles.length; ++i) {
        if (i > 0) {
            outerRadius = innerRadius - gap;
        }

        circles[i]['chart'] = createCircle(svg, outerRadius, innerRadius, circles[i].color, circles[i].percent);

        addStartImage(svg, circles[i].percent, outerRadius);
    }