Graph 用图像替换节点的三维力定向图

参考：

如何以与上面的堆栈溢出答案相同的方式将图像添加到以下优秀代码中

假设每个节点都有一个属性n.image=/images/imagexxx.jpg，我如何将本地文件系统中的此映像应用于其各自的节点？ 如果属性不存在，则将节点渲染为普通球体

以下是我的示例代码，它仅将所有节点渲染为small_image.jpg：

const elem = document.getElementById('3d-graph');
const driver = neo4j.v1.driver("bolt://192.168.1.251", neo4j.v1.auth.basic("neo4j", "test"));
const session = driver.session();
const start = new Date()
session
  .run('MATCH (n)-[r]->(m) RETURN { id: id(n), label:head(labels(n)), community:n.name, caption:n.name, size:log(n.links_from+n.links_to)} as source, { id: id(m), label:head(labels(m)), community:m.name, caption:m.name, size:log(m.links_from+m.links_to)} as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end} as rel LIMIT $limit', {limit: 5000})
  .then(function (result) {
    const nodes = {}
    const links = result.records.map(r => {
           var source = r.get('source');source.id = source.id.toNumber();
       nodes[source.id] = source;
           var target = r.get('target');target.id = target.id.toNumber();
       nodes[target.id] = target;
       var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
           return Object.assign({source:source.id,target:target.id}, rel);
        });
    session.close();
    console.log(links.length+" links loaded in "+(new Date()-start)+" ms.")
    const gData = { nodes: Object.values(nodes), links: links}

const Graph = ForceGraph3D()(elem)
                  .graphData(gData)
                  .nodeAutoColorBy('community')
                  .nodeVal('size')
                  .linkAutoColorBy('community')
                  .linkWidth(0)
                  .linkDirectionalParticles('weight')
                  .linkDirectionalParticleSpeed(0.001)
                  .nodeLabel(node => `${node.label}: ${node.caption}`)
                  .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)

    .nodeThreeObject(node => {
      var map = new THREE.TextureLoader().load( "small_image.jpg" );
      map.minFilter = THREE.LinearFilter;
      var material = new THREE.SpriteMaterial( { map: map } );
      var sprite =  new THREE.Sprite( material );
      sprite.scale.set(32,32,1);
      return sprite;
    });
// Spread nodes a little wider
Graph.d3Force('charge').strength(-150);
  })
  .catch(function (error) {
    console.log(error);
  });

const-elem=document.getElementById（'3d-graph'）；
const driver=neo4j.v1.driver（“bolt://192.168.1.251，neo4j.v1.auth.basic（“neo4j”，“test”）；
const session=driver.session（）；
const start=新日期（）
一场
.run（'MATCH（n）-[r]->（m）返回{id:id（n），label:head（labels（n）），community:n.name，caption:n.name，size:log（n.links_from+n.links_to）}作为源，{id:id（m），label:head（labels（m）），community:m.name，caption:m.name，size:log（m.links_from+m.links_to）}作为目标，{-weight:r.weight，type:type（r），community:n.community{
var source=r.get（'source'）；source.id=source.id.toNumber（）；
节点[source.id]=源；
var target=r.get（'target'）；target.id=target.id.toNumber（）；
节点[target.id]=目标；
var rel=r.get（'rel'）；if（rel.weight）{rel.weight=rel.weight.toNumber（）；}
返回Object.assign（{source:source.id，target:target.id}，rel）；
});
session.close（）；
console.log（links.length+“链接加载到”+（new Date（）-start）+“ms.”
const gData={nodes:Object.values（nodes），links:links}
常量图=ForceGraph3D（）（元素）
.graphData（gData）
.nodeAutoColorBy（“社区”）
.nodeVal（'size'））
.linkAutoColorBy（“社区”）
.linkWidth（0）
.linkDirectionalParticles（“重量”）
.linkDirectionalParticleSpeed（0.001）
.nodeLabel（节点=>`${node.label}:${node.caption}`）
.onNodeHover（node=>elem.style.cursor=node？“指针”：null）
.nodeThreeObject（节点=>{
var map=new THREE.TextureLoader（）.load（“small_image.jpg”）；
map.minFilter=THREE.LinearFilter；
var material=new THREE.SpriteMaterial（{map:map}）；
var sprite=新的三个sprite（材质）；
雪碧。规模。设置（32,32,1）；
返回精灵；
});
//将节点扩展一点
图。D3力（“电荷”）。强度（-150）；
})
.catch（函数（错误）{
console.log（错误）；
});

constelem=document.getElementById（'3d-graph'）；
const driver=neo4j.v1.driver（“bolt://localhost，neo4j.v1.auth.basic（“neo4j”，“test”）；
const session=driver.session（）；
const start=新日期（）
一场
.run（'MATCH（n:Entity）->（m:Entity）其中n.name=“newyork”返回{id:id（n），label:head（labels（n）），community:n.name，caption:n.name，image:n.image，size:log（n.links\u from+n.links\u to）}作为源，{id:id（m），label:head（labels（m）），community:m.name，caption:m.name，image，size:log（m.links\u from+m.links\u-to）}作为目标，{weight:r.weight，type:type（r），community:case when n.community{
var source=r.get（'source'）；source.id=source.id.toNumber（）；
节点[source.id]=源；
var target=r.get（'target'）；target.id=target.id.toNumber（）；
节点[target.id]=目标；
var rel=r.get（'rel'）；if（rel.weight）{rel.weight=rel.weight.toNumber（）；}
返回Object.assign（{source:source.id，target:target.id}，rel）；
});
session.close（）；
console.log（links.length+“链接加载到”+（new Date（）-start）+“ms.”
const gData={nodes:Object.values（nodes），links:links}
常量图=ForceGraph3D（）（元素）
.graphData（gData）
.nodeAutoColorBy（“社区”）
.nodeVal（'size'））
.linkAutoColorBy（“社区”）
.linkWidth（0）
.linkDirectionalParticles（“重量”）
.linkDirectionalParticleSpeed（0.001）
.nodeLabel（节点=>`${node.label}:${node.caption}`）
.onNodeHover（node=>elem.style.cursor=node？“指针”：null）
.nodeThreeObject（节点=>{
var map=new THREE.TextureLoader（）.load（（node.image！=null？node.image:）；
map.minFilter=THREE.LinearFilter；
var material=new THREE.SpriteMaterial（{map:map}）；
var sprite=新的三个sprite（材质）；
雪碧。规模。设置（32,32,1）；
if（node.image）{
返回精灵；}
否则返回false；
});
//将节点扩展一点
图。D3力（“电荷”）。强度（-150）；
})
.catch（函数（错误）{
console.log（错误）；
});

const elem = document.getElementById('3d-graph');
const driver = neo4j.v1.driver("bolt://localhost", neo4j.v1.auth.basic("neo4j", "test"));
const session = driver.session();
const start = new Date()
session
  .run('MATCH (n:Entity)-[r]->(m:Entity) WHERE n.name="new york" RETURN { id: id(n), label:head(labels(n)), community:n.name, caption:n.name, image:n.image, size:log(n.links_from+n.links_to)} as source, { id: id(m), label:head(labels(m)), community:m.name, caption:m.name, image:m.image, size:log(m.links_from+m.links_to)} as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end, image:case when n.image < m.image then n.image else m.image end} as rel LIMIT $limit', {limit: 5000})
  .then(function (result) {
    const nodes = {}
    const links = result.records.map(r => {
           var source = r.get('source');source.id = source.id.toNumber();
       nodes[source.id] = source;
           var target = r.get('target');target.id = target.id.toNumber();
       nodes[target.id] = target;
       var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
           return Object.assign({source:source.id,target:target.id}, rel);
        });
    session.close();
    console.log(links.length+" links loaded in "+(new Date()-start)+" ms.")
    const gData = { nodes: Object.values(nodes), links: links}


const Graph = ForceGraph3D()(elem)
                  .graphData(gData)
                  .nodeAutoColorBy('community')
                  .nodeVal('size')
                  .linkAutoColorBy('community')
                  .linkWidth(0)
                  .linkDirectionalParticles('weight')
                  .linkDirectionalParticleSpeed(0.001)
                  .nodeLabel(node => `${node.label}: ${node.caption}`)
                  .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
    .nodeThreeObject(node => {
            var map = new THREE.TextureLoader().load((node.image != null ? node.image : ""));
      map.minFilter = THREE.LinearFilter;
      var material = new THREE.SpriteMaterial( { map: map } );
      var sprite =  new THREE.Sprite( material );
      sprite.scale.set(32,32,1);

    if (node.image){
            return sprite; }
    else  return false;
    });

// Spread nodes a little wider
Graph.d3Force('charge').strength(-150);
  })
  .catch(function (error) {
    console.log(error);
  });