时间戳

首页 > 解决方案 > 3d-force-graph 节点标题的行为类似于（单个）可点击的 url 链接

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

问题描述

我试图让标题在点击时表现得像超链接。我遵循了堆栈溢出中给出的答案：

将链接附加到 3d-force-graph 节点

但它只适用于双击，标题看起来不像链接（不是下划线），只有节点球体是可点击的，而不是节点标题。总而言之，用户很难说它不是只读网络。

那么，有没有办法可以满足这 3 个要求？

  1. 单次（短）点击重定向
  2. 链接节点标题（node.id）而不是节点球体
  3. 悬停时样式节点标题（下划线或颜色变化）？

这是我的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 sphere）的目标，我尝试的最后一件事是使用“node.id”作为onNodeCLick函数的参数，但随后出现异常。

为了设置标题的样式（下划线或颜色更改），我为容器提供了一个类（“.node-label:hover”）并尝试使用 css 设置它的样式，但它也不起作用。

对于单击，我完全不知道。

谢谢您的帮助。

标签： graphthree.jshyperlinknodes

解决方案

推荐阅读