Issue with responsive d3 graph

Question

I'm having a really strange problem with my d3 graph. It works perfectly if I never enlarge the window past the initial dimensions. The graph will shrink when I shrink the window and enlarge when I enlarge the window. However, if I try to enlarge past the the initial size (when the page first loaded), it will not enlarge. It seems that there is some maximum size set to the dimensions of the graph when the page firsts loads. Does anyone have any idea what could cause something like this?

EDIT: Another issue with my graph is that there a mouse-over tool tip which appears where the mouse is, but it always appears underneath the path line. How can I ensure that it appears above the line?

Answer 1

You need to use the window.onresize function so that the increased area is available for use. Here is an example of a responsive d3 chart using the resize event to update the scales.

For the circle, you need to figure out how to update the circle's coordinates to put the circle in the appropriate place.

Answer 2

Well although this is definitely not an ideal or elegant solution, I did figure out a way to solve this. I set initial width and height to the largest the graph to ever be and then the resize function so it would shrink the the correct size. The graph now resizes up until that very large width and height, which is never reach, so it all works great.

Answer 3

I have the same problem. I initialize the chart like this:

var chart = d3.select(ele[0]).append("svg").attr("class", "chart").attr("height", height).append("g").attr("transform", "translate(15,30)");    

Then, on $window.onresize , I get a new height and width (data in there are correct) and try to set them:

chart.attr("width", width);chart.attr("height", height);    

And this is not working. Any ideas why?

EDIT: Searching for few hours, find nothing, post the question and find a solution. Maybe this will be helpful for someone:

I changed my above code to

d3.select(ele[0]).selectAll('svg').attr('height',height).attr('width',width);    

So I did not used chart to resize, I select the element again. Then it works.