在节点 PIXI.js 上追加文本

Question

我最近开始了一个简单的项目，使用 PIXI.js 绘制网络图。我是 PIXI.js 的新手，所以还不太确定如何充分利用该库。 bl.ocks.org 上的一个项目激发了我的兴趣： https://bl.ocks.org/kirjavascript/dcafa2b3a53cbcc9c5de19b938b92119

有什么方法可以显示节点的名称。我设法做到了，但文本不清楚，只是停留在 window 上。

How do I clear the text such that whenever the node is drag, the old position of the text is cleared?

下面的屏幕截图是输出的一个片段。

我编辑打勾的函数并产生这个结果。下面的代码是 ticked() 函数的一个片段：

function ticked() {   
    graph.nodes.forEach((node) => {
        var { x, y, gfx } = node;
        gfx.position = new PIXI.Point(x, y);

        var text = new PIXI.Text(node.id, textStyle);                        
        text.x = x;
        text.y = y;                                            
        stage.addChild(text);                            
    });

    links.clear();
    links.alpha = 0.6;                                    

    graph.links.forEach((link) => {
        var { source, target } = link;
        links.lineStyle(1.5, 0x000000);
        links.moveTo(source.x, source.y);
        links.lineTo(target.x, target.y);
    });                                    

    links.endFill();

    renderer.render(stage);

}

Answer 1

看起来您每个滴答都在创建一个新的 PIXI.Text 实例。您只想为每个节点创建 1 个文本实例，然后重新使用它。

ps。要设置位置，请执行

gfx.position.set(x, y);

为了节省创建不必要的 PIXI.Points 每个 tick。

在节点 PIXI.js 上追加文本

Append a text on the node PIXI.js

javascript

visualization

d3.js

pixi.js