3d-force-graph 节点标题的行为类似于（单个）可点击 url link

Question

我尝试让字幕在点击时表现得像 hyperlinks。我遵循了堆栈溢出中给出的答案：

Attach link to 3d-force-graph node

但它只适用于双击，标题看起来不像 link（不是下划线），而且只有节点球体是可点击的，而不是节点标题。总而言之，用户很难分辨它不是 read-only 网络。

那么，有什么方法可以满足这 3 个要求吗？

单击（短）重定向
link 在节点标题上 (node.id) 而不是在节点球体上
悬停时样式节点标题（下划线或颜色变化）？

这是我的 html 文件：

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

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

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

数据集的结构如下：

{
    "nodes": [
        {"id": "Math", "group": 1,"link": "test1.html"},
        {"id": "Algebra", "group": 1,"link": "test2.html"},
         ....
    ],
    "links": [
        {"source": "Math", "target": 'Algebra',"value": "2"},
         ....
    ]
}

为了更改 node.link（node.id 而不是节点球体）的目标，我最后尝试的是使用“node.id”作为 onNodeCLick 函数的参数但后来我得到一个例外。

并且为了设置标题的样式（下划线或颜色变化），我给容器 (".node-label:hover") 添加了 class 并尝试使用 [= 设置样式50=] 但它也不起作用。

对于单击，我完全没有头绪。

感谢您的帮助。

Answer 1

可能有点晚了，但由于我遇到了类似的问题并找到了解决方案（至少对于第二个问题）我想分享它。

所有 CSS2DObejects 都存在于带有样式标签“pointer-events:none”的 div 中。我认为这是启用相机移动所必需的，但会阻止我们与节点进行交互。

为了能够使用指针事件，您需要通过“pointer-events:all”在 CSS2DOBEJCTS 上启用它们。

.nodeThreeObject(node => {
           const nodeEl = document.createElement('div');
           nodeEl.textContent = node.id;
           nodeEl.style.color = 'white';
           nodeEl.style.pointer-events= 'all';
           nodeEl.className = 'node-label';
           nodeEl.addEventListener('pointerdown', event => console.log( event ))

           return new THREE.CSS2DObject(nodeEl);
       })

现在您可以添加事件侦听器，如上所示。

3d-force-graph 节点标题的行为类似于（单个）可点击 url link

3d-force-graph node caption behave like a (single) clickable url link

graph

hyperlink

nodes

three.js