need to plot networks with thousands of nodes and tenths of thousands of edges (or hundreds of thousands of edges). My guess is that using a ParticleContainer for the nodes and another for the edges is a pretty nice shot. Came up with this routine:
function plotNet () {
const nodes = [ // each entry is the position of a node, for example:
[130, 200],
[230, 350],
[50, 100],
[500, 100]
]
const edges = [ // each entry is the node indexes of the edge, for example:
[0, 1],
[0, 3],
[1, 2],
[1, 3],
[2, 3]
]
function plotNet (nodes, edges) {
nodes.forEach(n => mkNode(n))
edges.forEach(e => mkEdge(nodes[e[0]], nodes[e[1]]))
}
function mkNode (pos) {
const circle = new PIXI.Sprite(circleTexture)
circle.x = pos[0]
circle.y = pos[1]
circle.anchor.x = 0.5
circle.anchor.y = 0.5
nodeContainer.addChild(circle)
}
function mkEdge (pos1, pos2) {
const line = new PIXI.Sprite(lineTexture)
const dx = pos2[0] - pos1[0]
const dy = pos2[1] - pos1[1]
const length = (dx ** 2 + dy ** 2) ** 0.5
line.scale.set(length / 1000, 1)
const angle = Math.atan2(dy, dx)
line.rotation = angle
line.x = pos1[0]
line.y = pos1[1]
edgeContainer.addChild(line)
}
const nodeContainer = new PIXI.ParticleContainer(10000, {
scale: true,
position: true,
rotation: true,
alpha: true
})
const edgeContainer = new PIXI.ParticleContainer(10000, {
scale: true,
position: true,
rotation: true,
alpha: true
})
const myLine = new PIXI.Graphics()
.lineStyle(1, 0xff0000)
.moveTo(0, 0)
.lineTo(1000, 0)
const myCircle = new PIXI.Graphics()
.beginFill(0xffffff)
.drawCircle(0, 0, 5)
.endFill()
const app = new PIXI.Application()
document.body.appendChild(app.view)
const circleTexture = app.renderer.generateTexture(myCircle)
const lineTexture = app.renderer.generateTexture(myLine)
app.stage.addChild(edgeContainer)
app.stage.addChild(nodeContainer)
plotNet(nodes, edges)
}
which seems to work fine. Regarding speed, would you suggest something or that is how it is done?