Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Data caption in node #4

Closed
vergeten opened this issue Jun 4, 2019 · 4 comments
Closed

Data caption in node #4

vergeten opened this issue Jun 4, 2019 · 4 comments

Comments

@vergeten
Copy link

vergeten commented Jun 4, 2019

Hi Michael,

First off i would like to say that i really like this libary in combination with Neo4j :) The visualisation look amazing. That said i was wondering if it's possible to display the data caption, partial in the node in a 2D graph? Like this image:

image
@jexp
Copy link
Owner

jexp commented Jun 5, 2019

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

@jexp
Copy link
Owner

jexp commented Jun 5, 2019

Please let me know how it goes.

@jexp
Copy link
Owner

jexp commented Jun 5, 2019

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

Looks like this now:

‎localhost_8000_caption-nodes_

<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>

@jexp
Copy link
Owner

jexp commented Jun 5, 2019

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

@jexp jexp closed this as completed Jun 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jexp @vergeten