simulations/drawGraph.js at master · bitonproject/simulations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
'use strict'

const debug = require('debug')('biton:draw')
const { EventEmitter } = require('events')
const d3 = require('d3')

class drawGraph {
  constructor (graphSVG, graph) {
    this.svg = d3.select(graphSVG)
    this._width = this.svg.node().getBoundingClientRect().width
    this._height = this.svg.node().getBoundingClientRect().height

    this._nodes = []
    this._links = []

    this._parseGraph(graph)
    this._update()
  }

  _parseGraph (graph) {
    this._graph = graph

    const self = this
    this._graph.forEachNode(function (node, attributes) {
      self._nodes.push({id: node, attributes: attributes})
    })
    this._graph.forEachEdge(function (edge, attributes, source, target) {
      self._links.push({source: source, target: target})
    })

    debug('parsing graph complete')

    // Attach graph event listeners
    graph.on('nodeAdded', this.nodeAdded)
    graph.on('nodeDropped', this.nodeDropped)

    graph.on('edgeAdded', this.edgeAdded)
    graph.on('edgeDropped', this.edgeDropped)
  }


  _update() {
    this._simulation = d3.forceSimulation(this._nodes)
      .force('link', d3.forceLink(this._links).id(d => d.id))
      .force('charge', d3.forceManyBody())
      .force('center', d3.forceCenter(this._width / 2, this._height / 2))

    const link = this.svg.append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
      .selectAll("line")
      .data(this._links)
      .join("line")

    const node = this.svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
      .selectAll("circle")
      .data(this._nodes)
      .join("circle")
      .attr("r", 5)
      .call(this.drag(this._simulation))

    node.append('title')
      .text(d => d.id);

    this._simulation
      .on('tick', function () {
        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("cx", d => d.x)
          .attr("cy", d => d.y)
      } )
  }

  drag (simulation) {

    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart()
      event.subject.fx = event.subject.x
      event.subject.fy = event.subject.y
    }

    function dragged(event) {
      event.subject.fx = event.x
      event.subject.fy = event.y
    }

    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0)
      event.subject.fx = null
      event.subject.fy = null
    }

    return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended)
  }

  nodeAdded (key, attributes) {
  }

  nodeDropped (key, attributes) {
  }

  edgeAdded (key, source, target) {
  }

  edgeDropped (key, source, target) {
  }
}


module.exports = drawGraph