add event handling

demo/chords.js

@@ -58,6 +58,11 @@ var drawCircos = function (error, GRCh37, cytobands, data) {
       ticks: {
         display: true,
         labelDenominator: 1000000
+      },
+      events: {
+        'click.demo': function (d, i, nodes, event) {
+          console.log('clicked on layout block', d, event)
+        }
       }
     }
     )
@@ -88,6 +93,11 @@ var drawCircos = function (error, GRCh37, cytobands, data) {
       color: '#ff5722',
       tooltipContent: function (d) {
         return '<h3>' + d.source.id + ' ➤ ' + d.target.id + ': ' + d.value + '</h3><i>(CTRL+C to copy to clipboard)</i>'
+      },
+      events: {
+        'mouseover.demo': function (d, i, nodes, event) {
+          console.log(d, i, nodes, event.pageX)
+        }
       }
     }
     )

demo/heatmap.js

@@ -43,7 +43,12 @@ function drawCircos(error, months, electricalConsumption, daysOff) {
         innerRadius: 0.8,
         outerRadius: 0.98,
         logScale: false,
-        color: 'YlOrRd'
+        color: 'YlOrRd',
+        events: {
+          'mouseover.demo': function (d, i, nodes, event) {
+            console.log(d, i, nodes, event)
+          }
+        }
       })
       .heatmap('days-off', daysOff, {
         innerRadius: 0.7,

demo/index.html

@@ -33,7 +33,7 @@
     <link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.deep_purple-pink.min.css">
     <link rel="stylesheet" href="styles.css">
 
-    <script src='../dist/circos.js'></script>
+    <script src='../dist/circos.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'></script>
   </head>

package.json

@@ -1,14 +1,14 @@
 {
   "name": "circos",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "A d3js library to build circos graphs",
   "main": "index.js",
   "scripts": {
     "test": "NODE_ENV=test mocha --compilers js:babel-register  --require ignore-styles --reporter spec src/**/*.test.js src/*.test.js",
     "test:tdd": "NODE_ENV=test mocha --compilers js:babel-register --require ignore-styles --reporter nyan --watch src/*.test.js src/**/*.test.js",
     "coveralls": "CIRCOSJS_COVERAGE=1 mocha test --reporter mocha-lcov-reporter src/**/*.test.js | ./node_modules/coveralls/bin/coveralls.js",
     "start": "webpack --watch",
-    "build": "NODE_ENV=prod webpack --config webpack.config.lib.js --optimize-minimize && webpack --config webpack.config.js"
+    "build": "NODE_ENV=prod webpack --config webpack.config.lib.js --optimize-minimize && webpack --config webpack.config.lib.js --optimize-minimize && webpack --config webpack.config.js"
   },
   "repository": {
     "type": "git",

readme.md

@@ -103,7 +103,7 @@ var configuration = {
       major: 5,
     }
   },
-  clickCallback: null
+  events: {}
 }
 ```
 
@@ -212,6 +212,7 @@ Optionally each datum can define a `value` attribute to draw colored ribbons wit
 
 The available configuration fields are:
 - [color](#color)
+- [events](#events)
 - [opacity](#opacity)
 - [zIndex](#zIndex)
 - [tooltipContent](#tooltipContent)
@@ -246,6 +247,7 @@ Configuration:
   color: 'YlGnBu',
   logScale: false,
   tooltipContent: null,
+  events: {}
 }
 ```
 
@@ -299,6 +301,7 @@ Configuration:
   opacity: 1,
   logScale: false,
   tooltipContent: null,
+  events: {}
 }
 ```
 
@@ -335,6 +338,7 @@ The available configuration fields are:
 - [logScale](#logScale)
 - [logScaleBase](#logScaleBase)
 - [axes](#axes)
+- [events](#events)
 
 ### Line
 
@@ -368,6 +372,7 @@ The available configuration fields are:
 - [logScaleBase](#logScaleBase)
 - [axes](#axes)
 - [backgrounds](#backgrounds)
+- [events](#events)
 
 **Note**: The tooltip option is not available for line track. To display a tooltip, you should superimpose an invisble `scatter` track (`fill: false` and `strokeWidth: 0`) and set a tooltip for this track.
 
@@ -403,6 +408,7 @@ The available configuration fields are:
 - [logScaleBase](#logScaleBase)
 - [axes](#axes)
 - [backgrounds](#backgrounds)
+- [events](#events)
 
 ### Stack
 
@@ -436,6 +442,7 @@ Configuration:
   opacity: 1,
   logScale: false,
   tooltipContent: null,
+  events: {}
 }
 ```
 
@@ -464,6 +471,7 @@ Configuration:
     fill: 'black',
     opacity: 1,
   },
+  events: {}
 }
 ```
 
@@ -502,6 +510,22 @@ The `start` and `end` fields are interpreted as values on the same scale than th
 
 You can also specify a `color` and an `opacity`.
 
+### events
+
+All tracks and the layout configurations can receive an events attribute. This attribute must be an object where keys are event names and values are event callbacks. For example:
+
+```javascript
+{
+  events: {
+    'click.alert': function (datum, index, nodes, event) {
+      window.alert(datum)
+    }
+  }
+}
+```
+
+The documentation about d3 events is [here](https://github.com/d3/d3-selection/blob/master/README.md#selection_on). You can add all events described in this documentation. I recommend using event namespaces (`click.alert` instead of `click`) to avoid possible conflicts with internal circosjs events.
+
 ### innerRadius/outerRadius
 
 For the layout, the innerRadius and outerRadius values are always interpreted as a number of pixel.

src/configs.js

@@ -70,6 +70,10 @@ const common = {
   tooltipContent: {
     value: null,
     iteratee: false
+  },
+  events: {
+    value: {},
+    iteratee: false
   }
 }
 

src/layout/conf.js

@@ -31,5 +31,6 @@ export default {
   },
   onClick: null,
   onMouseOver: null,
+  events: {},
   zIndex: 100
 }

src/layout/render.js

@@ -1,5 +1,6 @@
 import {arc} from 'd3-shape'
 import {range} from 'd3-array'
+import {event} from 'd3-selection'
 
 function renderLayoutLabels (conf, block) {
   const radius = conf.innerRadius + conf.labels.radialOffset
@@ -106,6 +107,10 @@ export default function renderLayout (parentElement, instance) {
     .attr('class', (d) => d.id)
     .attr('opacity', conf.opacity)
 
+  Object.keys(conf.events).forEach((eventName) => {
+    block.on(eventName, function (d, i, nodes) { conf.events[eventName](d, i, nodes, event) })
+  })
+
   const entry = arc()
     .innerRadius(conf.innerRadius)
     .outerRadius(conf.outerRadius)

src/tracks/Chords.js

@@ -4,6 +4,7 @@ import {registerTooltip} from '../behaviors/tooltip'
 import {ribbon} from 'd3-chord'
 import assign from 'lodash/assign'
 import isFunction from 'lodash/isFunction'
+import {event} from 'd3-selection'
 
 import {common, values} from '../configs'
 
@@ -74,6 +75,10 @@ export default class Chords extends Track {
         this.dispatch.call('mouseout', this, d)
       )
 
+    Object.keys(conf.events).forEach((eventName) => {
+      link.on(eventName, function (d, i, nodes) { conf.events[eventName](d, i, nodes, event) })
+    })
+
     link.attr('fill', conf.colorValue)
 
     return link

src/tracks/Track.js

@@ -1,7 +1,7 @@
 import {registerTooltip} from '../behaviors/tooltip'
 import {dispatch} from 'd3-dispatch'
 import {arc} from 'd3-shape'
-import {select} from 'd3-selection'
+import {select, event} from 'd3-selection'
 import {getConf} from '../config-utils'
 import {buildScale} from '../utils'
 import {buildColorValue} from '../colors'
@@ -61,6 +61,11 @@ export default class Track {
       this.dispatch.call('mouseout', this, d)
     })
 
+    Object.keys(this.conf.events).forEach((eventName) => {
+      const conf = this.conf
+      selection.on(eventName, function (d, i, nodes) { conf.events[eventName](d, i, nodes, event) })
+    })
+
     return this
   }