3d Force Directed Graph - Replacing Nodes with Images

问题

I am trying to figure out the best way to use images to represent nodes, instead of circles.

I am using this as a starting point:

See code below:

<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/d3-dsv"></script>
<script src="https://unpkg.com/d3-fetch"></script>

<script src="https://unpkg.com/3d-force-graph@1"></script>
<script src="https://unpkg.com/d3-octree"></script>
<script src="https://unpkg.com/d3-force-3d"></script>
<style>
    body {
      font-family: Sans-serif;
      margin: 0;
     }
 </style>

</head>

<body>
<div id="3d-graph"></div>
<script>

   const LEVELS_GAP = 80;
const HEIGHT_OFFSET = 200;
const NODE_REL_SIZE = 1;

d3.csv('d3-dependencies.csv').then(data => {
  const nodes = [], links = [];
  data.forEach(({ size, path }) => {
    const levels = path.split('/'),
      level = levels.length - .1,
      module = level > 0 ? levels[1] : null,
      leaf = levels.pop(),
      parent = levels.join('/');

    const node = {
      path,
      leaf,
      module,
      size: +size || 20,
      fy: HEIGHT_OFFSET -level * LEVELS_GAP
    };

    nodes.push(node);

    if (parent) {
      links.push({ source: parent, target: path, targetNode: node });
    }
  });

  const elem = document.getElementById('3d-graph');

  ForceGraph3D()
    .nodeRelSize(NODE_REL_SIZE)
    .nodeId('path')
    .nodeVal('size')
    .nodeLabel('path')
    .nodeAutoColorBy('module')
    .nodeOpacity(0.9)
    .linkColor(d => d.targetNode.color)
    .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
    .onNodeClick(node => {
      const levels = node.path.split('/');
      if (levels.length > 2) { levels.splice(2, 0, 'tree/master/src'); } // Format github path
      window.open(`https://github.com/${levels.join('/')}`, '_blank')
    })
    .d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
    .graphData({ nodes: nodes, links: links })
    (elem);

});

Does anyone have any recommendations on how to best achieve this? I am a beginner and am still trying to figure out the best way to go about this.

Thank you

回答1:

From the text as nodes documentation, looks like you can create three.js sprites. From the documentation you can see how to load an image. Putting it together:

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

  <script src="//unpkg.com/three"></script>
  <script src="//unpkg.com/three-spritetext"></script>

  <script src="//unpkg.com/3d-force-graph"></script>
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
        .jsonUrl('//rawgit.com/vasturiano/3d-force-graph/master/example/datasets/miserables.json')
        .nodeAutoColorBy('group')
        .nodeThreeObject(node => {
          var map = new THREE.TextureLoader().load( "https://picsum.photos/100/100/?random" );
          map.minFilter = THREE.LinearFilter;
          var material = new THREE.SpriteMaterial( { map: map } );
          var sprite =  new THREE.Sprite( material );
          sprite.scale.set(32,32,1);
          return sprite;
        });
    // Spread nodes a little wider
    Graph.d3Force('charge').strength(-150);
  </script>
</body>

来源：https://stackoverflow.com/questions/53585646/3d-force-directed-graph-replacing-nodes-with-images

标签

d3.js

three.js