0

I am new to d3 js and facing some issues in zooming stacked bar chart. Here is my fiddle

The x-axis is zooming but I am unable to zoom the stacked bars. Any help is highly appreciated. Thanks in advance.

Nayanita Dey
  • 1
  • You have a typo in your onZoom callback. You're looking for `svgHistogram.selectAll(".bars rect")` but there's no `g` with a class **bars**. Just changed it to `svgHistogram.selectAll("rect.bar")` and the bars zoom fine - [Updated fiddle](https://jsfiddle.net/shz7tj2u/) – Shashank Aug 12 '19 at 13:24
  • Thanks Shashank. This was really helpful. – Nayanita Dey Aug 12 '19 at 13:40
  • As you're appending all the SVGs to the body, you can use `d3.selectAll` instead of `svgHistogram.selectAll` which would select all of the `rect.bar` on the page. I'd suggest you to use an outer `div` container so that you can use `d3.select('div.container').selectAll('rect.bar')`. – Shashank Aug 12 '19 at 14:14
  • And I see you're using a `for` loop to append 3 charts. A better approach would be to create a function and call it. It'll look cleaner as well. Here's an [example](https://stackoverflow.com/questions/41940439/display-multiple-d3-js-charts-in-a-single-html-page#answer-41948540). And if you're looking for more improvements to your code structure, I'd say post it on [CodeReview#d3](https://codereview.stackexchange.com/questions/tagged/d3.js). Thanks. – Shashank Aug 12 '19 at 14:16
  • 1
    Sure. Thanks @Shashank! :) – Nayanita Dey Aug 12 '19 at 14:23
  • Glad I could help! :) – Shashank Aug 12 '19 at 15:12

0 Answers0