zengzheng
/
CDSS-daming-web


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

  <script src="//unpkg.com/three"></script>
  <script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>

  <script src="//unpkg.com/3d-force-graph"></script>
<!--  <script src="../../dist/3d-force-graph.js"></script>-->

  <style>
    .node-label {
      font-size: 12px;
      padding: 1px 4px;
      border-radius: 4px;
      background-color: rgba(0,0,0,0.5);
      user-select: none;
    }
  </style>
</head>

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

  <script>
    const Graph = ForceGraph3D({
      extraRenderers: [new THREE.CSS2DRenderer()]
    })
    (document.getElementById('3d-graph'))
      .jsonUrl('../datasets/miserables.json')
      .nodeAutoColorBy('group')
      .nodeThreeObject(node => {
        const nodeEl = document.createElement('div');
        nodeEl.textContent = node.id;
        nodeEl.style.color = node.color;
        nodeEl.className = 'node-label';
        return new THREE.CSS2DObject(nodeEl);
      })
      .nodeThreeObjectExtend(true)
    ;
  </script>
</body>