3D-ориентированный граф с заменой узлов изображениями - PullRequest
0 голосов
/ 12 января 2019

Ссылка: 3d-график направленной силы - замена узлов изображениями

Как я могу добавить изображения к следующему отличному коду таким же образом, как и в ответе Stack Overflow выше?

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

1 Ответ

0 голосов
/ 12 января 2019
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);
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...