nicgirault / circosJS

d3 library to build circular graphs
MIT License
505 stars 117 forks source link

events not working? #68

Closed tulsidas closed 5 years ago

tulsidas commented 5 years ago

I'm trying to do something similar to this where on mouseover it shows only the appropriate chords, but I cannot get events to work. Code snippet:

    <script>
      var myCircos = new Circos({
        container: '#chart',
        width: 600,
        height: 600
      });

      var configuration = {
        innerRadius: 250,
        outerRadius: 300,
        cornerRadius: 10,
        gap: 0.02, // in radian
        labels: {
          display: true,
          position: 'center',
          size: 13,
          color: '#000000',
          radialOffset: 20
        },
        ticks: {
          display: false
        },
        events: {
          'click.demo': function (d, i, nodes, event) {
            console.log('clicked on layout block', d, event)
          }
        }
      }

      var data = [...]

      var chordData = [
        {
          source: {id: 'rtp', start: 15, end: 15 },
          target: {id: 'rt1', start: 5, end: 10 }
        },
        ...
      ];

      var chordConf = 
      {
        color: function(datum, index) {
          return datum.value < 5 ? 'red' : 'green';
        },
        events: {
          'mouseover.demo2': function (d, i, nodes, event) {
            console.log('mouseover on ', d, event)
          }
        }
      }

      myCircos
        .layout(data, configuration)
        .chords('cuerdas', chordData, chordConf)
        .render();
    </script>

With this snippet, the chord diagram displays fine, but I get no console output at all neither from mouseovers nor clicks (chords or layout regions)

What am I doing wrong? Thanks

tulsidas commented 5 years ago

never mind, I was loading an old version of circos.js