Zooming in CircosJS

Hello @nicgirault,

Is there a way to implement normal D3 zooming abilities within Circos layouts?

I’m using the Chords track similar to this example: https://github.com/nicgirault/circosJS/blob/master/doc/chords.png. I want to implement normal pan and zoom by scrolling with the mouse (https://bl.ocks.org/sgruhier/50990c01fe5b6993e82b8994951e23d0), and this is what I’m trying to do:

var width = 1000;
var height = 850;

var svg = d3.select("body")
  .append("div")
  .attr('id', 'chart')
  .attr("width", width)
  .attr("height", height);

svg.select(".all")
  .call(d3.zoom().on("zoom", function() {
    svg.select(".all").attr("transform", d3.event.transform)
  }))
  .append("g");

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

// ...
// Adding the configuration data for the layout and chords, and rendering

The zooming is not working as expected. As you can see, I have to do svg.select(".all") to actually select the svg element within the div tag.

Thank you!

[mtwichan]

@jnunez17 The issue was that I wrongly assumed that d3-zoom was included in the package,json. Once I installed it, everything worked wonderfully 👍

[jorgenunezsiri]

@matthewchan15 Sorry, I did not understand you before. You should be specifying the zoom call in your application, after creating the svg parent container (the same container that you use to create the Circos instance). Make sure you attach the zoom call to that parent container. Then, that svg is going to include an inner svg (coming from circos.js). The zoom should be working because the structure will be svg > svg, instead of svg > div > svg.