jacomyal / sigma.js

A JavaScript library aimed at visualizing graphs of thousands of nodes and edges
https://www.sigmajs.org
MIT License
11.16k stars 1.59k forks source link

Cannot drag nodes while ForceAtlas2 is running #327

Closed 3ch01c closed 2 years ago

3ch01c commented 10 years ago

The ForceAtlas2 plugin in v1.0.2 release allowed dragging nodes while the layout is running. The latest version does not seem to allow dragging. Any chance of this feature coming back?

gametack commented 10 years ago

Stop Force Atlas then you should be able to drag node. s.stopForceAtlas2();

antonkulaga commented 9 years ago

Stop Force Atlas then you should be able to drag node. s.stopForceAtlas2();

Node dragging often does not make sense if force layout is stopped. Force layout is not always optimal so the user should move some nodes that got stuck by drag and drop. In other graph libs such feature works by default ( try to drag something in vivagraph http://www.yasiv.com/graphs#Bai/rw496 for instance)

JosiahAllen commented 9 years ago

The problem is even if you do stop the force atlas during the drag, it just immediately returns the node back to where it was once you turn force atlas back on, instead of taking into account it's new position in the force algorithm. I can't use sigma for my project because users need to be able to move clusters about in space, and have the force algorithm adjust it's physics based on the new positions, and not have the force algorithm put everything back.

qinfchen commented 9 years ago

+1 for accounting the new positions for forceatlas

aditivin commented 8 years ago

What is the status on this? I can't drag my nodes without stopping force atlas 2

lukas-gitl commented 7 years ago

Easy solution: Set worker to false for the config and then use start and end drag events like so:

<html>
<head>
    <style type="text/css">
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.css.net/libs/sigma.js/1.2.0/sigma.min.js"></script>
<script src="https://cdn.css.net/libs/sigma.js/1.2.0/plugins/sigma.layout.forceAtlas2.min.js"></script>
<script src="https://cdn.css.net/libs/sigma.js/1.2.0/plugins/sigma.plugins.dragNodes.min.js"></script>
<script>
    $.getJSON("http://localhost:8000/data.json", function (data) {
        const s = new sigma({
            settings: {
                defaultNodeColor: '#ec5148',
                skipErrors: true
            }
        });
        let dragListener, atlasObj, nodes;
        s.graph.clear();
        s.graph.read(data);
        s.addCamera('cam');
        s.addRenderer({
            container: document.getElementById('container'),
            type: 'webgl',
            camera: 'cam'
        });

        atlasObj = s.startForceAtlas2({
            linLogMode: true,
            outboundAttractionDistribution: false,
            adjustSizes: false,
            edgeWeightInfluence: 0,
            scalingRatio: 1,
            strongGravityMode: false,
            gravity: 1,
            barnesHutOptimize: true,
            barnesHutTheta: 0.5,
            slowDown: 1,
            startingIterations: 1,
            iterationsPerRender: 1,
            worker: false
        });
        $(window).blur(function () {
            s.stopForceAtlas2();
        });
        $(window).on('focus', function () {
            s.startForceAtlas2();
        });

        dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
        dragListener.bind('startdrag', function (event) {
            s.stopForceAtlas2();
        });
        dragListener.bind('dragend', function (event) {
            nodes = atlasObj.supervisor.graph.nodes();
            for (let j = 0, i = 0, l = atlasObj.supervisor.nodesByteArray.length; i < l; i += atlasObj.supervisor.ppn) {
                if (nodes[j] === event.data.node) {
                    atlasObj.supervisor.nodesByteArray[i] = event.data.node.x;
                    atlasObj.supervisor.nodesByteArray[i + 1] = event.data.node.y;
                }
                j++;
            }
            s.startForceAtlas2();
        });
    });
</script>
</body>
</html>
ankanch commented 7 years ago

Hi,when I stop forceAltas(),nodes can be moved, but my network become this, looks so bad. What should I do?

screenshot from 2017-07-24 22-39-31

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.