Scrolling Stacked-Bar-Chart

[Erik Schluntz]

Hello everyone,

I'm trying to make a stacked bar-chart where the user can scroll along the x-axis and zoom in and out along the x-axis.

This is the scrolling functionality that I'm trying to achieve: http://mbostock.github.com/d3/talk/20111018/area-gradient.html

And this is the graph type that I'm trying to use: http://bl.ocks.org/1134768

I've been having a bit of trouble figuring out how to add the scrolling functionality to the 2nd example, because they use different versions of d3, and apparently d3.event.translate() no longer exists.

Does anyone know of how to scroll and zoom with the new version of d3, or generally how to approach this problem?

Thanks a ton!

- Erik

[Filipe Almeida]

Hi Eric,

I'm having the more or less the same problem. Try put some geometric zoom in your chart:

var zoom = d3.behavior.zoom()

.x(xScale)

.y(yScale)

.scaleExtent([1, 30])

.on("zoom", zoomed);

...

//Create SVG element

var container = d3.select("#mbars")

.append("svg")

.attr("width", w)

.attr("height", h)

.call(zoom);

...

function zoomed() {

container.select(".x.axis")

.call(xAxis)

// Geometric zoom

container.selectAll(".rgroups rect").attr('transform', 'translate(' + d3.event.translate[0] + ')scale(' + d3.event.scale + ',1)');

}

Hope this help...

Filipe