Code and dist build included. Graphosaurus only passes predefined attributes to it's node from data. This extends (overloads) the properties passed on to include an image path property for usage of images in relation to nodes e.g. displaying on hover or click

Hi Corey, just a question. ¿Is it posible to add nodes, change position, or add an edge dynamically? i don't know if is not possible now or is an error.

Maybe some graph method to redraw? Thanks! great project. Santiago

Seems like the functions for purging nodes and edges (which, admittedly, I added) are missing deletion of some representation(s?) of themselves in the data, causing the memory to slowly but surely overflow on multiple addition/deletion operations.

• Added render suppression so that the diagram's not redrawn for every single node added (only afterwards)
  • Added addNodes and addEdges functions, these basically suppress the rendering while forEach is running for their respective parameters, then call to syncDataToFrame

which I think just involves specifying ParticleSystemMaterial({sizeAttenuation: true})

For one thing, it might be nice to have the labels from #21 only appear when the node's displayed size is large enough.

I got an email from someone who is using the library. They're reporting the logic related to hovering/clicking on nodes is incorrect. Here's what they wrote:

the node ids that are returned refer to the THREE.BufferGeometry node and not the Graph Node nodes. Hence the label will always be incorrect.

I added a BufferAttribute to the BufferGeometry to map back to the Graph Node ids.

Frame.prototype._syncNodeDataFromGraph = function () { var nodes = this.graph.nodes();

    var positions = new THREE.BufferAttribute(
        new Float32Array(nodes.length * 3), 3);
    var colors = new THREE.BufferAttribute(
        new Float32Array(nodes.length * 3), 3);
   //id array
   var ids = new THREE.BufferAttribute(
        new Float32Array(nodes.length), 1);

    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        var pos = node._pos;
        var color = node._color;

        positions.setXYZ(i, this.scale * pos.x, this.scale *
    pos.y, this.scale * pos.z);
        colors.setXYZ(i, color.r, color.g, color.b);

        ids.setX(i, node._id);
    }

    this.points.addAttribute('position', positions);
    this.points.addAttribute('color', colors);
    this.points.addAttribute('id', ids);

    this.points.computeBoundingSphere();

    this._normalizePositions();
    this.positionCamera();
};

and

 Frame.prototype._initMouseEvents = function (elem) {
     ..
            var intersects =
       raycaster.intersectObject(self.pointCloud);
            if (intersects.length) {
                var nodeIndex =
       intersects[0].object.geometry.attributes.id.getX(intersects[0].index);
                callback(self.graph._nodes[nodeIndex]);

Line in question

What the 'Eve Universe' example looks like with THREE.LineSegments (what is being used now):

What the 'Eve Universe' example looks like with THREE.Line:

From what I can tell, THREE.LineSegments results in not all lines being drawn, but I'm not sure why.

I'm trying this library out, and I have to admit that it is very useful.

One issue that I'm having right now is that drawing two independent edges ends up with a third edge being drawn. Simple example:

graph = G.graph({
    antialias: true,
    bgColor: "black",
    edgeWidth: 1,
    nodeSize: 10
});
G.node([0, 0, 0], {id: 0}).addTo(graph);
G.node([0, 1, 0], {id: 1}).addTo(graph);
G.node([1, 0, 0], {id: 2}).addTo(graph);
G.node([1, 1, 0], {id: 3}).addTo(graph);

G.edge([0, 1]).addTo(graph);
G.edge([2, 3]).addTo(graph);

graph.renderIn('frame');

Expected result:

 O     O
 |     |
 |     |
 |     |
 |     |
 O     O

Result with the current version of graphosaurus:

 O     O
 |\    |
 | \   |
 |  \  |
 |   \ |
 O     O

This is problematic for me. If I'm doing something wrong here, I can't see what it is.

I have tried looking around the code and finding where this happens, but I chose this library specifically to avoid the learning code of three.js - so I don't know where this error is creeping in.