Labels are not displaying on graph

[scarescrow]

Hi,

I was trying to create a graph by passing labels in the data as follows:

{
    "nodes": [ 
        { 
          "id": "id1",
          "name": "name1",
          "val": 1 
        },
        ....
}

I see that the name attribute is used for displaying labels:

nameField([str]) | Node object accessor attribute for name (shown in label) | name

Is it possible to add an enhancement to show all labels below the nodes of the graph, instead of on pointing/hovering on the node?

Love the project by the way :)

[vasturiano]

Hi @scarescrow, thanks for reaching out. I think this is a good suggestion and would be a useful feature. I'm leaving the Issue open until I have some more time to look into getting it implemented.

[ulrichobjectsecurity]

Hi

Great project! I would also find labels underneath all nodes useful! Also, is there any way to add support for dragging nodes around in space? Thanks!

[ulrichobjectsecurity]

Hi, cool project. By the way, everything works great on Android, but on iPhone you cannot really move with the bluetooth keyboard, and the labels don't show up when hovering over a node. Just some feedback - hope it help.

Best Ulrich

[Romick2005]

Hi, thank for a hard work on this project! It is super cool!

@ulrichobjectsecurity My workaround was the following:

 graph.nodeThreeObject(
      function () {

        // Create node bubble
        const mesh = new THREE.Mesh(
          shape,
          new THREE.MeshLambertMaterial({
            color: "#51D047",
            transparent: true,
            opacity: 0.75
          })
        );

        // Create text node
        const nodeSpriteText = new SpriteText(node.label);
        nodeSpriteText.fontSize = 14;
        nodeSpriteText.color = "#FFFFFF";
        //nodeSpriteText.opacity = 0.75;
        nodeSpriteText.textHeight = 4;
        nodeSpriteText.position.y = -14;// Move to the bottom

        const group = new THREE.Group();
        group.add(nodeSpriteText);
        group.add(mesh);
        return group;
      }
  );