Connection of the two examples Load JSON and Images as nodes about force-graph HOT 5 CLOSED

@cherno-alpha thanks for reaching out.

The two features are completely independent. To better understand the issue you're experiencing, it's easier if you could create a small example on https://codepen.io/ that reproduces the problem.

from force-graph.

I'm new to github and codepen, so a cautious heads up.

I used your Load JSON example and want to set images as nodes with nodeCanvasObject(). What do I need to write in the function?

Here is the Link to Codepen:
https://codepen.io/cherno-alpha/pen/oNamadd

from force-graph.

@cherno-alpha you just need to refer to this example to see how to write your canvas code to paint images:

from force-graph.

@cherno-alpha - this was exactly what I wanted to ask! The JSON fetch is what I need for a large family tree:
https://quickening.zapto.org/fg-network.html
But I want images on the nodes, with attached labels:
https://quickening.zapto.org/fg-images.html

I can see the network example creating a data object with methods that refer to "node object accessor", but I don't know how to change nodeCanvasObject to work with that data object. It just tells me img undefined:

`fetch('Tree/links.json').then(res => res.json()).then(data => {

  const Graph = ForceGraph()
  (document.getElementById('graph'))
  .nodeCanvasObject(({ img, x, y }, ctx) => {
    const sizeX = 200;
    const sizeY = 237;
    const url = img.currentSrc;
    const label = decodeURI(url.substring(url.lastIndexOf('/')+1).slice(0, -4));
    const textWidth = ctx.measureText(label).width;
    ctx.drawImage(img, x - sizeX / 2, y - sizeY / 2, sizeX, sizeY);
    ctx.font = "11px Arial";
    ctx.fillText( label, x - sizeX / 2 + ( sizeX / 2  - textWidth / 2), y + sizeY / 2 + 20);
  })

`
I'm guessing "{img, x, y}" is the node object...

from force-graph.

@KyleDave yes that is the node object. So, basically you first need to add your image objects to each of your nodes, under the img attribute. This example shows that:

from force-graph.