GraphXR API
Selection

Selection

A Selection is a list of nodes.

We can make a Selection by calling gxr.nodes(). Edge selection (gxr.edges()) follows similar rules.

Creating a Selection

All Visible Nodes

gxr.nodes()

By ID

Pass a single ID or an array.

gxr.nodes("A")
gxr.nodes(["A", "B"])

By Category

Use the : operator.

gxr.nodes(":Person")
gxr.nodes({category: "Person"})

By Style

Use the [[]] wrapper.

gxr.nodes("[[selected]]")
gxr.nodes({styles: {selected: true}})
gxr.nodes("[[alpha > 0.5]]")
gxr.nodes({styles: {alpha: (alpha) => alpha > 0.5}})

By Property

Omit the [[]] to filter by property.

gxr.nodes("age > 28")
gxr.nodes({properties: {name: "Flo"}})
gxr.nodes({properties: {name: (name) => name.startsWith("F")}})

Sorted

gxr.nodes({sort: 'age'})
gxr.nodes({sort: 'age', reverse: true})
gxr.nodes({sort: (a, b) => a.age - b.age})

What can we do with a selection?

  • Apply layout: gxr.nodes(":Person").circle()
  • Delete nodes: gxr.nodes("price < 10").delete()
  • Set properties by function: `gxr.nodes().property("house", (node) => node.properties.houseName.toUpperCase())
  • Set properties to constant: gxr.nodes(":House").property("type", "House")
  • Set a style: gxr.nodes(":Person").style("alpha", 0.5)
  • Set alpha: gxr.nodes("age > 28").alpha(0.5)
  • Set pinned: gxr.nodes(":House").pinned(true)
  • Mark them selected: gxr.nodes("houseName = Stark").select()
  • Deselect: gxr.nodes("houseName = Stark").deselect()
  • Hide: gxr.nodes("houseName = Stark").hide()
  • Show: gxr.nodes("houseName = Stark").show()
  • Twinkle: gxr.nodes("houseName = Stark").twinkled(true)
  • Highlight: gxr.nodes("houseName = Stark").highlight()
  • Aggregate: gxr.nodes(":Store").aggregate({ formula: "sum", property: "price" })
  • Randomize a numeric property: gxr.nodes(":Characters").randomize('luck', {min: 0, max: 200})
  • Randomize a categorical property: gxr.nodes(":Characters").randomize('color', ['red', 'green', 'blue'])
  • Serialize: gxr.nodes(":Characters").serialize()
  • Fly to center (aka, "Center To"): gxr.nodes("A").flyToCenter() or .centerTo()
  • Fly out (so all are visible in camera): gxr.nodes("A").flyOut()
Hello WorldLayout