anvaka / ngraph

Beautiful Graphs
MIT License
1.41k stars 131 forks source link

gexf file from gephi to 3d graph? #21

Open sandboxdp opened 8 years ago

sandboxdp commented 8 years ago

First of all: amazing work!

here you say that the ngraph generated from a .gexf file could also easily be rendered by using e.g. ngraph.three as the renderer. I changed ngraph.pixi to ngraph.three, but it doesn't seem to work. Could you please help?

ticapix commented 6 years ago

Here is some raw code doing what you're (were) looking for

module.exports.main = async function() {
    let query = require('query-string').parse(window.location.search.substring(1));
    let graph = await getGraphFromDisk(query);
    let createThree = require('ngraph.three');
    let graphics = createThree(graph, {
        interactive: true
    });
    graphics.run(); // begin animation loop:
    graphics.camera.position.z = getNumber(query.z, 2000);
};

function getGraphFromDisk(query) {
    let gexf = require('ngraph.gexf');
    let filename = query.filename || 'graph.gexf';
    return new Promise(function(resolve) {
        let req = new XMLHttpRequest();
        req.open('GET', filename);
        req.onload = function() {
            let content = this.responseText;
            let graph = gexf.load(content);
            resolve(graph);
        };
        req.send();
    });
}

function getNumber(string, defaultValue) {
    let number = parseFloat(string);
    return (typeof number === 'number') && !isNaN(number) ? number : (defaultValue || 10);
}

Starting a local web server like python3 -m http.server and browsing to http://localhost:8000