Graph with image + text on the same node ?

[dimitri995]

Hello,

Is it possible to generate a graph with image + text for some nodes and other nodes have only text ?

And have the possibility to have handle the size of image. Best practice to a have a great rendering for image ? Svg, png, jpg ?

I have difficult to do it...

If I can have an example, it will be great. I am using react-force-graph.

Thanks for your time..

Regards

Dimitri

[dimitri995]

a good soul to help me?🤞🏼🙏🏻

[mohidmakhdoomi]

Hi @dimitri995 , maybe you can combine both of the following examples
https://github.com/vasturiano/react-force-graph/blob/master/example/img-nodes/index.html
https://github.com/vasturiano/react-force-graph/blob/master/example/text-nodes/index-3d.html

something like

        nodeThreeObject={({ img }) => {
          const spriteText = new SpriteText(img);
          spriteText.textHeight = 8;

          const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
          imgTexture.colorSpace = THREE.SRGBColorSpace;
          const material = new THREE.SpriteMaterial({ map: imgTexture });
          const sprite = new THREE.Sprite(material);
          sprite.scale.set(12, 12);

          const group = new THREE.Group();
          group.add(spriteText);
          group.add(sprite);

          return group;
        }}

[dimitri995]

Hi @mohidmakhdoomi,

Thank you for your answer. I found a solution with this code by using nodeCanvasObject :

  import jsIcon from './../../assets/javascript-icon.png';
  import javaIcon from './../../assets/jave-icon.png';
  import pythonIcon from './../../assets/python-icon.png';

  ...

    <ForceGraph2D
      ref={fgRef}
      height={600}
      width={2000}
      graphData={graphData}
      cooldownTicks={100}
      onEngineStop={() => fgRef.current.zoomToFit(400)}
      nodeAutoColorBy="group"
      nodeCanvasObject={(node, ctx, globalScale) => {
        if (node.type === 'img') {
          const img = new Image();
          if(node.path.endsWith('package.json')) {
            img.src = jsIcon;
          }else if(node.path.endsWith('pom.xml') || node.path.endsWith('gradle.yaml') || node.path.endsWith('gradle.yml')) {
            img.src = javaIcon;
          }else if(node.path.endsWith('requirements.txt')) {
            img.src = pythonIcon;
          }
          const size = 12;
          ctx.drawImage(img, node.x - size / 2, node.y - size / 2, size, size);
        } else {
          let label;
        switch (node.type) {
          case 'product':
            label = node.id;
            break;
          case 'project':
            label = node.projectName;
            break;
          case 'path':
            label = node.path;
            break;
          default:
            label = node.id;
        }
        const fontSize = 15 / globalScale;
        ctx.font = `${fontSize}px Sans-Serif`;
        const textWidth = ctx.measureText(label).width;
        const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding

        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = node.color;
        ctx.fillText(label, node.x, node.y);

        node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
      }
    }}
    nodePointerAreaPaint={(node, color, ctx) => {
      ctx.fillStyle = color;
      const bckgDimensions = node.__bckgDimensions;
      bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
    }}
    nodeLabel={node => {
      switch (node.type) {
        case 'product':
          return `Product: ${node.id}`;
        case 'project':
          return `Project: ${node.projectName}`;
        case 'path':
          return `Path: ${node.path}`;
        default:
          return node.id;
      }
    }}
  />