3D知识图谱可视化/关系可视化

最近准备搞个大活儿，将2D的知识图谱转为3D形式，现在先进行技术储备。

四个知道

论文&设计标准

网络拓扑三维可视化系统的研究与实现，把各种布局算法给讲解了，这个对我们开发实现来说，很重要：

https://xueshu.baidu.com/s?wd=paperuri%3A%287a25f46a8160b05dd9bc7dc905154224%29&filter=sc_long_sign&tn=SE_xueshusource_2kduw22v&sc_vurl=http%3A%2F%2Fwww.doc88.com%2Fp-1458576603467.html&ie=utf-8&sc_us=12546661473725591341

阿里数据的知识图谱可视化设计标准

https://www.ui.cn/detail/533594.html

(精)知识图谱可视化技术在美团的实践与探索

有设计+程序实现的介绍，很赞

https://www.51cto.com/article/706621.html

技术方案

通过解读3d-force-graph这个开源项目来分析技术实现方案。

一些技巧

将常用的某一批API封装为一个对象，比如这个就是作图常用的一批API，包括sence、camera、renderer、controls、tbControls等等：

1	`import ThreeRenderObjects from 'three-render-objects';`

方案设计，可以参考index.d.ts文件，先把各个API、参数类型给定好。

将this传入作图元素方法中

类似这样：

// 布局
layout.use(this.option.layout.type, this)
// 绘制节点
drawNodes(this);
// 绘制连线
drawEdges(this);

可以有效解决配置数据四处传递的代码可读性差的问题。

可以用来局部代替我的state全局对象。

球体

这个插件是支持传入Three的对象来自定义形状的，比如img-nodes这个Demo中，将节点设置为图片：

const Graph = ForceGraph3D()(document.getElementById('3d-graph'))
// 自定义节点形状
.nodeThreeObject(({ img }) => {
    // use a sphere as a drag handle
    const obj = new THREE.Mesh(
        new THREE.SphereGeometry(7),
        new THREE.MeshBasicMaterial({
            depthWrite: false,
            transparent: true,
            opacity: 0,
        })
    );

    // add img sprite as child
    const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
    const material = new THREE.SpriteMaterial({ map: imgTexture });
    const sprite = new THREE.Sprite(material);
    sprite.scale.set(12, 12);
    obj.add(sprite);

    return obj;
})
// 传入数据对象
.graphData(gData);

线条

有用到THREE.BufferGeometry

这个还需要详细调试下drawEdges()这个方法。

为什么线是6个点呢，是通过画一个管子来实现么？

const lineGeometry = new THREE.BufferGeometry();
lineGeometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
let linePos = lineGeometry.getAttribute('position');
linePos.array[0] = fromNode.position[0]
linePos.array[1] = fromNode.position[1]
linePos.array[2] = fromNode.position[2]
linePos.array[3] = toNode.position[0]
linePos.array[4] = toNode.position[1]
linePos.array[5] = toNode.position[2]
let lineMesh = new THREE.Line(lineGeometry, lineMaterial);

流动的线条

有提供一个API：

linkDirectionalParticles([num, str or fn])

可以看下这个具体是怎么实现的。

一个炫酷的效果：

1	`for(var i = 1; i < 1000; i++){flow.pipe.addPipe(0,i, {})}`

光源

这个代码很值得学习：

let addLight = function(that){
  that.option.lights.forEach(lightOpt=>{
    let light = new THREE[lightOpt.type](...lightOpt.args);
    if(typeof lightOpt.set == 'function'){
      lightOpt.set(light)
    }
    that.scene.add(light); 
  })
}

export default addLight;

组件默认的配套光源：

lights:[
  {
    type:'PointLight',
    args: [0xffffff],
    set: function(light){
      light.position.set(400, 200, 300)
    }
  },{
    type:'AmbientLight',
    args: [0x444444],
  }
]

文本

A sprite based text component for ThreeJS. The text is drawn to canvas, converted into a Texture and then used as a material on a Sprite. Because a sprite is being used, the text will always face the camera, and has its orientation fixed relative to the camera.

通过linkThreeObject来进行文本自定义：

const Graph = ForceGraph3D()(document.getElementById('3d-graph'))
.jsonUrl('../datasets/miserables.json')
.nodeLabel('id')
.nodeAutoColorBy('group')
.linkThreeObjectExtend(true)
.linkThreeObject((link) => {
    // extend link with text sprite
    const sprite = new SpriteText(`${link.source} > ${link.target}`);
    sprite.color = 'lightgrey';
    sprite.textHeight = 1.5;
    return sprite;
})
.linkPositionUpdate((sprite, { start, end }) => {
    const middlePos = Object.assign(
        ...['x', 'y', 'z'].map((c) => ({
            [c]: start[c] + (end[c] - start[c]) / 2, // calc middle point
        }))
    );

    // Position sprite
    Object.assign(sprite.position, middlePos);
});

// Spread nodes a little wider
Graph.d3Force('charge').strength(-120);