Horizontal panning for Bar chart

[Sgol]

I am new to D3 and I am actually trying horizontal panning options for a bar chart. I have tried the following example where horizantal panning works perfectly but there are certain problems that i could see. As I want to limit the panning with respect to the data that are present in the graph (how to restrict the chart only with the valid data) and I could see the bar chart showing up in the negative horizontal side of the graph (How to hide the bars when it reaches negative horizontal side) Please help me through this. Are there any working examples available online. Thank you.

[Spiros Eliopoulos]

I wrote a blog post on this topic. Have a look and see if it helps you out:

  http://computationallyendowed.com/blog/2013/01/21/bounded-panning-in-d3.html

-Spiros E.

On Mon, Apr 8, 2013 at 7:12 AM, Sgol <logs...@gmail.com> wrote:

I am new to D3 and I am actually trying horizontal panning options for a bar chart. I have tried the following example where horizantal panning works perfectly but there are certain problems that i could see. As I want to limit the panning with respect to the data that are present in the graph (how to restrict the chart only with the valid data) and I could see the bar chart showing up in the negative horizontal side of the graph (How to hide the bars when it reaches negative horizontal side) Please help me through this. Are there any working examples available online. Thank you.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Diego Martinez Salvanha]

seliopou, will it work with stacked bar charts ?

I've tried lots of aproaches that works with line (area) charts, but no success with stacked bar charts.

Cheers.,

[Blake Ball]

Hi Spiros,

I was following your blog post on this – it looks very straightforward, however I am getting errors when trying to redraw my chart on pan.

My attempt:

var zoom = d3.behavior.zoom().scaleExtent([1, 1]);

            zoom.x(x);

            zoom.on('zoom', function() { 

              svg.select('.data').enter().append("rect").attr("class", "bar")

                    .attr("x", function(d) { return x(d.day)+14; })

                    .attr("width", x.rangeBand()/3)

                    .attr("y", function(d) { return y(d.steps); })

                    .attr("height", function(d) { return height - y(d.steps); });

            });
svg.call(zoom);

My initial definition of my bar graph:

svg.selectAll(".bar")

                    .data(data)

                    .enter().append("rect")

                    .attr("class", "bar")

                    .attr("x", function(d) { return x(d.day)+14; })

                    .attr("width", x.rangeBand()/3)

                    .attr("y", function(d) { return y(d.steps); })

                    .attr("height", function(d) { return height - y(d.steps); });

[Blake Ball]

edit: I'm getting these errors when I attempt to pan my graph horizontally:

Uncaught TypeError: undefined is not a function d3.min.js:3

and I get hundreds of them if I click and drag, so the listener is definitely working, just failing to redraw, I believe.