如何在d3.js中为上下文菜单的创建和删除添加转换?

我在创造一个 Force-Directed Graph 使用 D3.js

带上下文菜单

d3.easeCircleIn 和 d3.easeCircleOut d3-ease 图书馆)。

// Create context menu data
const contextMenu = [
    {
        value: 1,
        type: 'unlock',
        icon: require('@/assets/images/unlock.svg'),
        text: 'Unlock the node to re-layout the graph'
    },
    {
        value: 1,
        type: 'info',
        icon: require('@/assets/images/info.svg'),
        text: 'Show node detailed information'
    }
];

const pie = d3.pie()
    .value((d: any) => d.value)
    .padAngle(0.0349066); // 2 degrees in radian

this._donutData = pie(contextMenu);

this._arcGenerator = d3.arc()
    .innerRadius(this._options.nodeRadius * 1.35)
    .outerRadius(this._options.nodeRadius * 2.5)

然后,在 click 事件,我使用以下函数创建圆环图:

private createDonut(node: any) {
    const _me = this;

    return node.selectAll('arc')
        .data(this._donutData)
        .enter()
        .append('path')
        .attr('class', this._arcClass)
        .attr('d', this._arcGenerator)
        .attr('fill', '#eeeeee')
        .style('opacity', 0.7)
        .on('click', function (event: any, chosenArc: any) {
            
            // Remove other context menu
            d3.select(`.${ _me._contextMenuClass }`).remove();

            // Further processing...

        });
}

现在,我想补充一下 d3-transition 为了这个创造。我试图通过添加 .transition() 点击 事件)但它不起作用。

// Doesn't work
d3.select(`.${ _me._contextMenuClass }`)
    .transition()
    // transition duration and so on...
    .remove();

那么,我应该怎么做才能将转换添加到上下文菜单中呢?谢谢你的帮助!