图数据可视化与分析：从 Neo4j Bloom 到大规模前端渲染

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<div id="cy" style="width:100%;height:600px;"></div>
<script>
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {
    nodes: [
      { data: { id: 'alice', label: 'Alice', type: 'person' } },
      { data: { id: 'bob', label: 'Bob', type: 'person' } },
      { data: { id: 'plume', label: 'Plume', type: 'company' } }
    ],
    edges: [
      { data: { id: 'e1', source: 'alice', target: 'bob', label: 'KNOWS' } },
      { data: { id: 'e2', source: 'alice', target: 'plume', label: 'WORKS_AT' } }
    ]
  },
  style: [
    { selector: 'node', style: {
        'background-color': '#4DB6AC', 'label': 'data(label)',
        'text-valign': 'center', 'color': '#333' } },
    { selector: 'node[type="company"]', style: { 'background-color': '#FF7043' } },
    { selector: 'edge', style: {
        'curve-style': 'bezier', 'target-arrow-shape': 'triangle',
        'label': 'data(label)', 'width': 2 } }
  ],
  layout: { name: 'cose', animate: true }   // 力导向布局
});
</script>

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg id="graph" width="900" height="600"></svg>
<script>
const data = {
  nodes: [
    { id: 'alice', label: 'Alice' },
    { id: 'bob', label: 'Bob' },
    { id: 'plume', label: 'Plume' }
  ],
  links: [
    { source: 'alice', target: 'bob', label: 'KNOWS' },
    { source: 'alice', target: 'plume', label: 'WORKS_AT' }
  ]
};

const sim = d3.forceSimulation(data.nodes)
  .force('link', d3.forceLink(data.links).distance(120))
  .force('charge', d3.forceManyBody().strength(-400))
  .force('center', d3.forceCenter(450, 300));

const link = d3.select('#graph').selectAll('line')
  .data(data.links).join('line').attr('stroke', '#999');

const node = d3.select('#graph').selectAll('g')
  .data(data.nodes).join('g')
  .call(d3.drag().on('start', dragStart).on('drag', dragged).on('end', dragEnd));

node.append('circle').attr('r', 18).attr('fill', '#4DB6AC');
node.append('text').attr('dy', 30).text(d => d.label);

sim.on('tick', () => {
  link.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
      .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
  node.attr('transform', d => `translate(${d.x},${d.y})`);
});
</script>

# Flask API：Neo4j → JSON
def graph_json(entity_name):
    with driver.session() as s:
        recs = s.run("""
            MATCH path = (e:Entity {name: $name})-[r*1..2]-(n)
            RETURN path
        """, name=entity_name)
        nodes, edges, ids = {}, [], set()
        for rec in recs:
            for node in rec["path"].nodes:
                nid = str(node.element_id)
                if nid not in ids:
                    ids.add(nid)
                    nodes[nid] = {"id": nid, "label": node.get("name"), 
                                  "type": list(node.labels)[0]}
            for rel in rec["path"].relationships:
                edges.append({
                    "source": str(rel.start_node.element_id),
                    "target": str(rel.end_node.element_id),
                    "label": rel.type,
                    "weight": rel.get("weight", 1)
                })
    return {"nodes": list(nodes.values()), "edges": edges}

// 聚合映射：communityId → 超节点
const communities = {};
for (const row of communityResult) {
  (communities[row.communityId] = communities[row.communityId] || []).push(row.entity_id);
}
// 渲染超节点，保存展开状态

<script src="https://cdn.jsdelivr.net/npm/sigma@2.4.0/build/sigma.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/graphology@0.25.4/dist/graphology.umd.min.js"></script>
<script>
const graph = new graphology.Graph();
graph.addNode('alice', { x: 0, y: 0, size: 12, color: '#4DB6AC', label: 'Alice' });
graph.addNode('bob', { x: 1, y: 1, size: 12, color: '#4DB6AC', label: 'Bob' });
graph.addEdge('alice', 'bob', { size: 2, color: '#ccc' });

const renderer = new Sigma(graph, document.getElementById('sigma-container'));
</script>

# docker-compose 一段：Grafana + Neo4j
services:
  grafana:
    image: grafana/grafana:10.4
    ports: ["3000:3000"]
    environment:
      GF_AUTH_ANONYMOUS_ENABLED: "true"
  neo4j:
    image: neo4j:5.15-community
    ports: ["7474:7474", "7687:7687"]
    environment:
      NEO4J_AUTH: neo4j/password

<!-- 左侧指标卡 + 右侧大图 -->
<div class="metrics">
  <div class="card">关键枢纽数: <b>12</b></div>
  <div class="card">社区数: <b>7</b></div>
</div>
<div id="cy"></div>