kirjs / react-highcharts

React wrapper for Highcharts library
http://kirjs.github.io/react-highcharts/
MIT License
1.26k stars 233 forks source link

Append a text on the node. #377

Closed southzyzy closed 6 years ago

southzyzy commented 6 years ago

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.