datastorm-open / visNetwork

R package, using vis.js library for network visualization
Other
542 stars 127 forks source link

Node labels cause extreme node sizes, and can't use ellipsis on node labels #458

Open chayduk-deloitte opened 1 year ago

chayduk-deloitte commented 1 year ago

Expected Behavior

Should be able to prevent node size from exceeding a certain point. Node labels should be cut at a certain point and ended with an ellipsis (...)

Actual Behavior

Scaling with regards to labels has no noticeable effect on node size. Long node labels completely warp the shape of the graph.

image

How to Reproduce the Problem

Below are the config options used for the graph. The scaling values are set to extreme levels for now to see if they have any effect on the graph.

export const visOptions: VisOptions = {
    edges: {
        arrows: {
            to: {
                enabled: directed,
                type: "arrow",
            },
        },
    },
    nodes: {
        shape: "circle",
        widthConstraint: 90,
        scaling: {
            max: 1,
            label: {
                enabled: true,
                max: 0,
                maxVisible: 0,
              }
        },
    },
    physics: {
        forceAtlas2Based: {
            gravitationalConstant: -26,
            centralGravity: 0.005,
            springLength: 230,
            springConstant: 0.18,
        },
        maxVelocity: 146,
        solver: "forceAtlas2Based",
        timestep: 0.35,
        stabilization: { iterations: 150 },
    },
};
nick-youngblut commented 2 months ago

If you change the node shape that should fix the issue. Circles do not follow size, as is the case for the other shapes.

An example:

nodes <- data.frame(id = 1:10,

                    # add labels on nodes
                    label = paste("Node", 1:10),

                    # add groups on nodes 
                    group = c("GrA", "GrB"),

                    # size adding value
                    #value = 1:10, 

                    # size
                    size = 3,

                    # control shape of nodes
                    shape = c(rep("circle", 5),
                              rep("square", 5)),

                    # tooltip (html or character), when the mouse is above
                    title = paste0("<p><b>", 1:10,"</b><br>Node !</p>"),

                    # color
                    color = c("darkred", "grey", "orange", "darkblue", "purple"),

                    # shadow
                    shadow = c(FALSE, TRUE, FALSE, TRUE, TRUE))             
edges <- data.frame(from = c(1,2,5,7,8,10), to = c(9,3,1,6,4,7))
visNetwork(nodes, edges, height = "500px", width = "100%")

The result: Screenshot 2024-06-10 at 8 39 20 PM

As you can see, circle shapes do not follow the size parameter. Change circle to a different shape, and then it will follow the size parameter.

@bthieurmel should this repo be considered a public archive, since it hasn't been updated in a couple of years?