CODEWITHSUNDEEP
javascriptcsssvgd3.js
daviestar
daviestar

Reputation: 4641

responsive d3 area graph stretches circle interaction points

I have been experimenting with a simple d3 google analytics-style area graph demo. I'd like to make it stretch to the full width of its container, which I have managed to do. However the little circles are of course stretching out of shape too. I'd like their positions to be responsive, but not their dimensions (so they remain circular).

Fiddle link: http://jsfiddle.net/46PfK/2/

I'm trying to use the SVGPanUnscale.js script. I have tried calling it with unscaleEach('.dot'); and [].forEach.call($('.dot'),unscale); but neither appear to do anything.

This example is responsive in a similar way to mine and uses the script to 'unscale' the axis labels: http://meloncholy.com/static/demos/responsive-svg-graph-1/

This example also uses circle elements: http://phrogz.net/svg/scale-independent-elements.svg

I looked at solutions involving the css attribute:

circle {
    vector-effect: non-scaling-stroke;
}

which created a circular stroke on an ellipse - weird.

A CSS solution would be preferable to a JS one, provided it works across browsers.

Any suggestions?

Upvotes: 2

Views: 681

Answers (2)

Erich
Erich

Reputation: 2773

There's a good example on resizing with D3 https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/

After you update your scales, only thing left to resize your circles would be something like this: 

/* Force D3 to recalculate and update the points */
svg.selectAll('circle')
    .attr('cx', function (d) { return xScale(d.x); })
    .attr('cy', function (d) { return yScale(d.y); })
    .attr('r', 4);

Upvotes: 0

daviestar
daviestar

Reputation: 4641

Thanks to @leMoisela for pointing me in the right direction. I fixed my issue nicely using JS to redraw the graph on resize:

http://jsfiddle.net/46PfK/4/

window.onresize = function(e){
    draw_graph();
};

Upvotes: 0

Related Questions