如何在 d3.js 中为上下文菜单的创建和删除添加过渡？

Question

我正在使用D3.js版本 6 创建一个力导向图。对于每个节点，当用户单击它时，将出现一个上下文菜单。 当用户单击其他地方（例如单击 SVG）时，上下文菜单将消失。 它看起来像这样：

没有上下文菜单

带上下文菜单

到目前为止，一切正常。 现在，我想为上下文菜单的创建和删除添加 2 个转换，分别是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()添加到末尾（在click事件之后.transition()来扩展上面的代码，但它不起作用。

我对删除做了同样的事情，它也不起作用。

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

那么，我应该怎么做才能将过渡添加到我的上下文菜单中？ 感谢您的帮助！

Answer 1

.transition()有自己的事件系统，你可以过渡到opacity: 0然后.on("end", function() { d3.select(this).remove(); })已经看不见了！