Hi Michael, First off i would like to say that i really like this li

Data caption in node about neo4j-3d-force-graph HOT 4 CLOSED

jexp commented on May 18, 2024

Data caption in node

from neo4j-3d-force-graph.

Comments (4)

jexp commented on May 18, 2024 1

I guess that's something you can figure out yourself. It's just javascript :)

from neo4j-3d-force-graph.

jexp commented on May 18, 2024

Thanks a lot,

I'm really just wrapping his amazing work. I think you saw the example for "text as nodes".

I saw you already raised an issue with him.

If you look at his code example I guess the easiest is to draw a background circle on the canvas instead of a rect here:

https://github.com/vasturiano/force-graph/blob/master/example/text-nodes/index.html#L26

from neo4j-3d-force-graph.

jexp commented on May 18, 2024

Please let me know how it goes.

from neo4j-3d-force-graph.

jexp commented on May 18, 2024

I just quickly took his demo and changed it a bit:

Looks like this now:

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/force-graph"></script>
  <!--<script src="../../dist/force-graph.js"></script>-->
  <script src="//unpkg.com/d3-quadtree"></script>
  <script src="//unpkg.com/d3-force"></script>
  
</head>

<body>
  <div id="graph"></div>

  <script>
    fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
      const Graph = ForceGraph()
      (document.getElementById('graph'))
        .graphData(data)
        .d3Force('collide', d3.forceCollide(50))
        .nodeId('id')
        .nodeAutoColorBy('group')
        .nodeCanvasObject((node, ctx, globalScale) => {
          const label = node.id;
          const fontSize = 12/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 = node.color; // 'rgba(255, 255, 255, 0.8)';
          ctx.beginPath();
          const radius = Math.max(bckgDimensions[0],bckgDimensions[1])/2 + 2;
		  ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI);
		  ctx.globalAlpha = 0.3;
		  ctx.fill();
		  ctx.stroke();
		  ctx.globalAlpha = 1;
//          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);
        });
    });
  </script>
</body>

from neo4j-3d-force-graph.

Data caption in node about neo4j-3d-force-graph HOT 4 CLOSED

Comments (4)

Related Issues (9)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent