GraphXR API Reference

gxr.flyToCenter();
gxr.flyToCenter(gxr.nodes().slice(0, 10).ids())
gxr.flyToCenter(gxr.nodes().slice(0, 10).ids(), { duration: 0, offset: -3 }));

const position = gxr.nodes({name: "Flo"}).at(0).position;
gxr.flyToPosition(position); // no offset
gxr.flyToPosition(position, {offset: -3}); // with an offset
gxr.flyToPosition(position, {duration: 0}); // instantly

gxr.flyOut();

gxr.setCameraOptions({
  hideAxes: true,
  rotating: true,
  speed: 0.5,
});

gxr.setCameraRotating(true);

gxr.captionNodesByProperties({category: "Person", properties: ["name", "age"]});

gxr.onGraphDataUpdate(() => console.log("Graph data updated"));

gxr.onSelect((event) => console.log("Selected nodes/edges", event));

gxr.add("A") -> Node with id "A"
gxr.add("A", "B") -> Edge
gxr.add(["A", "B"]) -> Node[]
gxr.add({ id: "A", category: "Person", properties: {name: "Flo"} }) -> Node
gxr.add([{ id: "A", category: "Person", properties: {name: "Flo"} }]) -> Node[]
gxr.add({ sourceId: "A", targetId: "B" }) -> Edge
gxr.add([{ sourceId: "A", targetId: "B" }]) -> Edge[]
gxr.add([{ source: {...}, edge: {...}, target: {...} }], {...}) -> Edge[] // mergeRelationships
gxr.add({ name: "Flo" }, { category: "Person" }) -> Node
gxr.add([{ name: "Flo" }], { category: "Person" }) -> Node[]
gxr.add([{ name: "Flo" }]) -> Node[]
gxr.add({ id: "A" }, { id: "B" }) -> Edge
gxr.add({ id: "A" }, { id: "B" }, { relationship: "LINK" }) -> Edge with relationship "LINK"

gxr.addNode({ id: "A", category: "Person", properties: {name: "Flo"} });

gxr.clear();

gxr.edges().forEach(console.log);
gxr.edges().property('since', 2023);
gxr.edges().property('since', () => Math.random() * 3000);
gxr.edges().style('width', 10)
gxr.edges({relationship: 'LINKS'}).style('width', 10);
gxr.edges({properties: {since: 2023}}).style('width', 10);

gxr.getCategoryConfig('Person');

gxr.getNode("A")

gxr.getRelationshipConfig("RELATED_TO");

// Add a node with id "A"
gxr.graph().add("A");
 
// Select nodes in shortest path from A -> B, including A and B
gxr.graph().shortestPath("A", "B").nodes().select()
 
// Generate a random graph, run degree algorithm, and then run ego layout for a duration of 1 second.
gxr
  .graph()
  .clear()
  .generate()
  .degree()
  .ego(
    {
      properties: { degree: (value) => value >= 3 },
      depth: 5,
      mode: "tree",
      orientation: "down",
      edgeLength: 0.5,
      sortByProperty: "degree",
    },
    { duration: 1000 }
  );

gxr.makeGraph().add("A").add("B").add("C").add("A", "B").add("B", "C").add("C", "A");

gxr.nodes().forEach(console.log);
gxr.nodes().property('age', 24);
gxr.nodes().property('age', () => Math.random() * 100);
gxr.nodes({category: "Person"}).style('selected', true);
gxr.nodes({properties: {age: 24}}).style('selected', true);
gxr.nodes({properties: {age: (age) => age > 24}}).style('selected', true);

gxr.randomGraph()
gxr.randomGraph({nodeCount: 100, edgeCount: 200, categories: ["Person", "Company"], relationships: ["WORKS_FOR", "KNOWS"]});

gxr.select('age > 30')

gxr.alignBy({
  dimension: 'x',
})

gxr.circle();

gxr.cube();

// Distribute nodes on the x-axis by a property
gxr.distributionBy('similarity')
 
// Equally space Nodes on the x-axis
gxr.distributionBy({
  dimension: 'x', // y, or z
})
 
// Equally space Nodes on the x-axis and bin the Nodes by "seasonNumber"
gxr.distributionBy({
  bin: 'seasonNumber',
  dimension: 'x',
})
 
// Equally space Nodes on the x-axis and bin the Nodes by "seasonNumber" in descending order
gxr.distributionBy({
  bin: 'seasonNumber',
  dimension: 'x',
  reverse: true,
})

gxr.ego({
  depth: 3, // maximum depth of the tree; default 100
  edgeLength: 1 // visual length of the edges in the tree; default 0.2
  mode: 'rings' // 'tree' or 'rings'; default 'tree'
  orientation: 'down' // 'up', 'down', 'left', or 'right'; default 'right'
  sortByProperty: 'ComponentName' // arrange child nodes in ascending order by a property
  [sortByProperty: sortByProperty({property: "ComponentName", ascending: false})] // same as above, but descending
}))

gxr.grid();

gxr.line();

If a dimension is omitted, it is flattened to align with the grid.
 
// Line up Nodes on the x-axis, ordered by seasonNumber.
// Also set y and z to 0
gxr.parametric({
  x: 'seasonNumber',
  y: 0,
  z: 0,
})
 
// Line up Nodes on the x-axis, ordered by seasonNumber descending. Align y and z to the grid.
gxr.parametric({
  x: 'seasonNumber',
  reverse: true,
})
 
// Linearly scale seasonNumber, episodeNumber, and millionViewers on the x, y, and z dimensions respectively
gxr.parametric({
  x: 'seasonNumber',
  y: 'episodeNumber',
  z: 'millionViewers',
})

gxr.rotate({
  dimension: 'x',
  theta: 90,
})
 
gxr.rotate({
  dimension: 'z',
  theta: 45
})

gxr.scale({
  x: 2,
  y: 2,
  z: 2,
})

gxr.scatter()

gxr.shift({
  x: 1,
})

gxr.toast("Hello, world!");
gxr.toast().info("Hello, world!");
gxr.toast().success("Hello, world!");
gxr.toast().error("Hello, world!");
gxr.toast().warn("Hello, world!");
await gxr.toast().promise(fetch(), "Hello, world!");

gxr.setParametricAxesOptions({
  showAxes: false,
})

gxr.spiral()

// Run force layout
gxr.forceLayout();

 nodes(): IterableNodes;
gxr.neo4j("MATCH (n) RETURN n LIMIT 10");

gxr.setTipsEnabled(false);

gxr.setAutoShowImage(true);

gxr.setEdgeScale(0.5);

gxr.setEdgeArrowVisibility(true);

gxr.setBlendEdge(false);

gxr.setAutoCaption(true);

gxr.setFullscreen(true);

gxr.setPinIconVisible(false);

gxr.setAlternateCaption(false);

gxr.setDashline(false);

gxr.setTheme("light")
gxr.setTheme("dark")

//use curve line
gxr.setUseCurveLine(true)
//use straight line
gxr.setUseCurveLine(false)

gxr.setRelationshipNameVisibility(true)

gxr.setGraphMode("2D")

gxr.setCaptionScale(0.5)

gxr.colorNodesByProperty('age');
gxr.colorNodesByProperty({property: 'age'});
gxr.colorNodesByProperty({property: 'age', scale: 'BuGn'});

const icons = await gxr.getIcons();

const icon = await gxr.getIconByName("person");

gxr.setCategoryColor("Person", "#00ff00");

const icon = await gxr.getIconByName("person");
gxr.setCategoryIcon("Person", icon);

gxr.setCategoryIconByName("Person", "person");

gxr.setCategoryVisibility("Person", false);

gxr.setRelationshipColor("KNOWS", "#00ff00");

gxr.setRelationshipVisibility("KNOWS", false);

gxr.sizeNodesByProperty({category: "Person", property: 'age'});

gxr.traceNeighbor()

gxr.aggregate({
  formula: 'sum',
  property: "age",
})
 
gxr.aggregate({
  formula: 'concatenate',
  separator: ",",
  property: "name",
  along: "KNOWS",
  startNodeId: "A",
  [depth: 3], // optional. Default is 1
})
 
gxr.aggregate({
  // Formula can also be a function
  formula: (values) => values.reduce((a, b) => a + b, 0),
  ...
}))

gxr.extract({
  sourceCategory: "Episodes",
  targetCategory: "Season",
  props: [
    {
      name: "seasonNumber",
      isKey: true,
    },
    {
      name: "millionViewers",
    },
    {
      name: "episodeAirDate",
    },
  ],
  relationship: "IN_SEASON",
})

gxr.link({ sourceProperty: "id", targetProperty: "id" })
 
gxr.link({
  sourceCategory: "Roles",
  sourceProperty: "ParentName",
  targetCategory: "Roles",
  targetProperty: "ComponentName",
  relationship: "IS_PARENT_OF"
})

gxr.merge({
  keys: ['seasonNumber'],
})
 
gxr.merge({
  category: "Episode",
  keys: ['seasonNumber'],
})
 
// Combine all emails between two persons sent on the same day (thus removing directionality)
gxr.merge({
  relationship: "SENT_MAIL_TO"
  keys: ['sendDate'],
})
 
// Combine all emails between two persons sent on the same day and preserve directionality
gxr.merge({
  relationship: "SENT_MAIL_TO"
  keys: ['sendDate'],
  directional: true,
})

gxr.mergeNodes({
  data: [{ name: "Flo", age: 32 }],
  category: "Person",
  keys: ["name"]
})

gxr.mergeRelationships({
  data: [
    { source: {name: "Flo"}, edge: {since: 2010}, target: {name: "Aiden"} },
    { source: {name: "Flo"}, edge: {since: 2010}, target: {name: "Georgio"} },
  ],
  source: { category: "Person", keys: ["name"] },
  edge: { relationship: "KNOWS", keys: ["SINCE"] },
  target: { category: "Person", keys: ["name"] },
})

gxr.quickInfoEnabled(true);

gxr.showQuickInfo(gxr.nodes().at(0));

gxr.showQuickInfo(gxr.nodes().at(0));

gxr.shortcut({
  incoming: 'IS_PARENT_OF',
  center: 'Node',
  outgoing: 'IS_PARENT_OF',
  shortcut: "IS_GRANDPARENT_OF",
  directional: true,
  aggregate: [
    {
      sourceProperty: "age",
      targetProperty: "averageAge",
      formula: "average",
    },
  ],
  countLinks: false,
})

for (const {node, edge, depth} of gxr.traverse({ startNodeId: "A", depth: 3 })) {
  console.log(node, edge, depth);
}

gxr.addContextMenuItem({
  name: "Find Similar",
  text: "Find Similar",
  icon: "iconfont icon-similar",
  hide: () => false,
  enable: () => true,
  action: (name, nodeId, edgeId, props) => {
    console.log("Finding similar to", name, nodeId, edgeId, props);
  },
})

gxr.dispatchGraphDataUpdate();

gxr.randomId() -> "lijfsleifjzlse";

gxr.sleep(1000);

// Get snapshot
const mySnapshot = gxr.snapshot()
 
// Apply snapshot
gxr.snapshot(mySnapshot)

gxr.vector() -> Vector3 {x: 0, y: 0, z: 0}
gxr.vector(1) -> undefined
gxr.vector(1, 2) -> Vector2 {x: 1, y: 2}
gxr.vector({x: 1, y: 2, z: 3}) -> Vector3 {x: 1, y: 2, z: 3}
gxr.vector([1, 2, 3]) -> Vector3 {x: 1, y: 2, z: 3}
gxr.vector(1, 2, 3) -> Vector3 {x: 1, y: 2, z: 3}
gxr.vector({x: 1, y: 2, z: 3, w: 4}) -> Vector4 {x: 1, y: 2, z: 3, w: 4}

const currentUser = gxr.getCurrentUser();
console.log(currentUser);