Question

参考：3d Force Directed Graph - Replacing Nodes with Images

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

https://github.com/jexp/neo4j-3d-force-graph/blob/master/particles.html

假设每个节点可能具有 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);
  });

Answer 1

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);
  });

3D强制有向图用图像替换节点

1 个答案: