jeudi 30 novembre 2017

d3 zoom x-domain only

I currently have a d3 bar graph for which I am trying to restrict zooming to only its x-axis.

The data spans a high number of years along the x-axis, resulting in a highly concentrated bar graph. I'd like to be able to zoom along the x-axis, thus spreading the bars farther apart horizontally - similar to what is being done on this line graph here.

Right now, I have a function within my ember app in which I select each of the elements within the SVG and zoom in along both axes. How do I restrict zooming to occur only along the x-axis?

enableZoom() {

const svg = d3.select('svg');

const zoomHandler = d3.zoom().scaleExtent([1, 2]).on('zoom', zoomed);

const bars = svg.selectAll('.bar'),
      lines = svg.selectAll('.line'),
      circles = svg.selectAll('circle');

zoomHandler(svg);

function zoomed() {

  lines.attr('transform', d3.event.transform);
  circles.attr('transform', d3.event.transform);
  bars.attr('transform', d3.event.transform);

}

},




Aucun commentaire:

Enregistrer un commentaire