使用3d-force-graph时.nodeColor()无法更新节点颜色的问题

问题根源 #

你的代码存在两种引入方式冲突和API调用写法错误，导致.nodeColor()配置未生效，具体问题：

1. 同时使用了全局脚本引入和ES模块模式，造成ForceGraph3D实例上下文混乱
2. .d3Force('link')的链式调用写法不符合API规范
3. 若节点数据自带color字段，会覆盖全局颜色配置

修改方案 #

1. 统一使用ES模块引入方式

移除全局脚本标签，通过importmap配置模块地址并导入ForceGraph3D：

2. 修正API调用写法

调整.nodeColor()为函数形式（优先级高于节点自带color），修正d3Force的配置方式

修改后的完整代码 #

<head>
    <style> body { margin: 0; } </style>
    <script type="importmap">
        { 
            "imports": { 
                "three": "//unpkg.com/three/build/three.module.js",
                "3d-force-graph": "//unpkg.com/3d-force-graph/dist/3d-force-graph.module.js"
            }
        }
    </script>
</head>

<body>
    <div id="3d-graph"></div>
    
    <script type="module">
        import ForceGraph3D from '3d-force-graph';

        const graph = ForceGraph3D()(document.getElementById('3d-graph'))
            .jsonUrl('jsondata.json')
            .nodeColor(() => 'rgb(255, 255, 255)')
            .nodeLabel(node => `${node.name}`)
            .d3Force('link', d3 => d3.forceLink().distance(link => 1 / link.value * 30));
    </script>
</body>

额外排查点 #

• 检查jsondata.json中的节点对象，若存在color属性，要么删除该字段，要么在.nodeColor()函数中自定义逻辑（比如node => node.name === 'xxx' ? 'red' : 'rgb(255,255,255)'）
• 确保浏览器支持ES模块和importmap（现代浏览器均支持，旧版浏览器需用打包工具处理）

内容的提问来源于stack exchange，提问作者ss16525