neo4j-contrib / neovis.js

Neo4j + vis.js = neovis.js. Graph visualizations in the browser with data from Neo4j.
Apache License 2.0
1.59k stars 324 forks source link

Node labels cause extreme node sizes, and can't use ellipses on node labels #339

Open chayduk-deloitte opened 1 year ago

chayduk-deloitte commented 1 year ago

Expected Behavior (Mandatory)

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 (Mandatory)

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 },
    },
};
Ricardo-M-Tian commented 3 weeks ago
   H1: {
            label: "name",
            size: "100",
            // group: "community",
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
              function: {
                label: (node) => {
                  if (node.properties.name.length >= 5) {
                    return node.properties.name.substr(0, 5) + "..."; // 显示前5个字符加省略号
                  } else {
                    return node.properties.name; // 显示完整名称
                  }
                },
              },
            },
          },