kirjs / react-highcharts

React wrapper for Highcharts library

Home Page:http://kirjs.github.io/react-highcharts/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Append a text on the node.

southzyzy opened this issue · comments

Hey, I have recently started a simple project to plot network graphs using PIXI.js. I'm new to the PIXI.js so am not very sure how to fully utilise the library yet. One of your projects on blocks.org spark my interest:
https://bl.ocks.org/kirjavascript/dcafa2b3a53cbcc9c5de19b938b92119

Just wondering after plotting the graph, is there any way that I can display the node.id, specifically the name of the node and display it on the node.
I manage to do it but the text does not clear and just stays on the window. How do I clear the text such that whenever the node is drag, the old position of the text is cleared.

The screenshot below is a snippet of the output.
1

I edit the ticked function and produce this result. The code below is a snippet of the ticked() function:

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);

}

I would like to thank you in advance for taking your time to read and resolve this issue.