Angular D3js饼图在路由后消失

Posted 2023-03-28

【中文标题】Angular D3js饼图在路由后消失

【英文标题】：Angular D3js pie chart disappears after routing

【发布时间】：2022-01-02 17:27:36

【问题描述】：

我使用 D3 饼图创建了一个甜甜圈，并在我的 angular (12) 应用程序中填充了一个小动画。当我第一次加载页面时，我制作的图表工作正常（它是登录后加载的页面）。然后，如果我转到另一个页面，并以任何方式返回（浏览器或路由的上一页）饼图首先出现然后完全消失，则 svg 元素不再位于 DOM 中。

例如，在第一次加载时，我的 DOM 中有这个 svg：

 <svg  >
        <g transform="translate(40, 40)" id="g-7621300556">
            <linearGradient x1="0" x2="1" y1="1" y2="0.5" id="gradient-url-7621300556">
                <stop offset="0%" stop-color="var(--secondary)" stop-opacity="0.1"></stop>
                <stop offset="100%" stop-color="var(--secondary)" stop-opacity="1"></stop>
            </linearGradient>
            <path fill="url(#gradient-url-7621300556)" d="M-5.970153145843346e-15,32.5A32.5,32.5,0,0,1,-30.90933677959249,-10.043052317185793L-26.15405419811672,-8.497967345311057A27.5,27.5,0,0,0,-5.051668046482832e-15,27.5Z" style="transform: rotate(180deg)" opacity="0.3" stroke=""></path>
            <path fill="transparent" d="M-30.90933677959249,-10.043052317185793A32.5,32.5,0,1,1,1.990051048614449e-15,32.5L1.6838893488276107e-15,27.5A27.5,27.5,0,1,0,-26.15405419811672,-8.497967345311057Z" style="transform: rotate(180deg)" opacity="1" stroke="var(--background)"></path>
            <text text-anchor="middle" dy=".3em" id="text-7621300556" fill="var(--secondary)">30 %</text>
        </g>
    </svg>

然后什么都没有，根本没有 svg。 我做了这个 gif 来说明：

这是我所做的：

chart.component.ts：

import  Component, Input, AfterViewInit, OnChanges, SimpleChanges  from '@angular/core';
import * as d3 from 'd3';

export class ChartDataSet 
    filledPartPercent: number;
    emptyPartPercent: number;
    label?: string;


@Component(
    selector: 'chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.scss'],
)
export class ChartComponent implements AfterViewInit, OnChanges 

    @Input() donutId: string;
    @Input() dataSet: ChartDataSet;
    @Input() width: number;
    @Input() margin: number;
    @Input() duration = 1500;
    @Input() thickness = 2.5;
    @Input() anglesRange = Math.PI;
    @Input() cssVarColor = 'var(--secondary)';
    @Input() gradient = false;
    height: number;
    radius: number;
    svg: any;
    randomize: number;

    constructor() 
    

    ngAfterViewInit() 
        this.init();
    

    ngOnChanges(changes: SimpleChanges): void 
        this.init();
    

    private init(): void 
        this.randomize = Math.floor(Math.random() * (10000 - 10) + 10);
        this.height = this.width;
        this.radius = (this.width / 2) - this.margin;
        this.donutDraw();
    

    private donutDraw() 
        const percent = this.dataSet.filledPartPercent;
        const color = this.cssVarColor;
        const id = this.donutId;
        const random = this.randomize;
        let gradientElement = null;

       const data = 
            lower: this.calcPercent(0),
            upper: this.calcPercent(percent)
        ;

        const arc = d3.arc().innerRadius(this.radius - this.thickness).outerRadius(this.radius + this.thickness);

        const pie = d3.pie().value(d => d).sort(null).startAngle(this.anglesRange * -1).endAngle(this.anglesRange);

        this.svg = d3.select('#donut-' + id).append('svg')
            .attr('width', this.width)
            .attr('height', this.height)
            .append('g')
            .attr('transform', 'translate(' + this.width / 2 + ', ' + this.height / 2 + ')')
            .attr('id', 'g-' + id + random);

        if (this.gradient) 
            gradientElement = this.svg.append('linearGradient').attr('x1', '0').attr('x2', '1').attr('y1', '1').attr('y2', '0.5')
                .attr('id', 'gradient-url-' + id + random);
            gradientElement.append('stop').attr('offset', '0%').attr('stop-color', color).attr('stop-opacity', '0.1');
            gradientElement.append('stop').attr('offset', '100%').attr('stop-color', color).attr('stop-opacity', '1');
        

        let path = this.svg.selectAll('path')
            .data(pie(data.lower))
            .enter().append('path')
            .attr('fill', 'var(--background')
            .attr('d', arc)
            .each(function(d)  this._current = d; );

        const text = this.svg.append('text').attr('text-anchor', 'middle').attr('dy', '.3em')
            .attr('id', 'text-' + id + random);

        const timeout = setTimeout(() => 
            clearTimeout(timeout);
            path = path.data(pie(data.upper));
            path.transition()
                .duration(this.duration)
                .attrTween('d', function(a, index) 
                    const self = this;
                    const i = d3.interpolate(this._current, a);
                    const i2 = d3.interpolateNumber(0, percent);
                    this._current = i(0);
                    return t => 
                        d3.select(self).attr('fill', index !== 0 ? 'transparent' : gradientElement != null ? 'url(#gradient-url-' + id + random + ')' : color )
                            .attr('style', 'transform: rotate(180deg)')
                            .attr('opacity', index !== 0 ? 1 : i2(t) / 100)
                            .attr('stroke', index !== 0 ? 'var(--background)' : '');
                        text.text(Math.round(i2(t)) + ' %').attr('fill', color);
                        return arc(i(t));
                    ;
                );
        );
    

    private calcPercent(percent) 
        return [percent, 100 - percent];
    

chart.component.html

<div [id]="'donut-' + donutId" class="wrap"></div>

chart.component.scss

.wrap 
    width: 100%;
    height: 100%;
    display: block;

我根据this one 等其他 SO 页面尝试了几件事，但到目前为止没有任何效果。我的图表有一个随机生成的id，梯度也是，我不知道接下来要做什么。 我也尝试在Stackblitz 上重现它，但它工作正常......

我不知道是什么原因造成的，如果您需要更多代码，请告诉我。

【问题讨论】：

在你的 stackblitz 例子中它并没有消失，它只是加载到 30%。是预期的吗？

是的，它在 stackblitz 中运行良好，我无法重现它。我最好的猜测是它与这类问题有某种联系：github.com/angular/angular/issues/6782

【参考方案1】：

正如 cmets 中所建议的，问题通常不是 D3.js 或 SVG，而是与 this issue 有关。

在我的例子中，我在 ngFor 上缺少 trackBy 函数，这导致多次重新加载组件。

更正它解决了我的问题，但并没有完全解释为什么它会消失而不仅仅是重新加载。 我发现我错过了几件事来正确地做到这一点，一句话：NgOnDestroy。

我将此添加到我的代码中，以便在重新加载时它不会消失：

export class ChartComponent implements AfterViewInit, OnChanges, OnDestroy 
    @ViewChild('donutRef',  static: true) donutRef: ElementRef; // <--- top div of this component
    [......]
    svg: any; // <--- this.svg = d3.select('#donut-' + id).append('svg') when initialising the chart
    [......]

    public ngOnDestroy() 
        this.svg.remove();
        this.donutRef.nativeElement.remove();
    
    [......]

如果有人遇到此类问题，我希望这会有所帮助。