CODEWITHSUNDEEP
javascriptd3.jssvg
FrontEndist
FrontEndist

Reputation: 153

d3 chart resize doesn't work as expected

I'm trying to make a responsive chart.

This is my code :

var width = (parseInt(d3.select('#'+chartID).style('width'), 10));

...

d3.select(window).on('resize', function() {
    // Recalculate
    width = parseInt(d3.select('#'+chartID).style('width'), 10);
    d3.select(svg.node().parentNode).style('width', (width) + 'px');
});

It doesn't set style attributes to the SVG. What am I missing?

Upvotes: 0

Views: 92

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

Sorry for "answering", I don't have points for commenting. I can delete this after you read:

Check if your "svg" is a group (g) element. Maybe something like this:

var svg = d3.select('#chart').append('svg')
    .style('width', (width + margin.left + margin.right) + 'px')
    .append('g')
    .attr('transform', 'translate(' + [margin.left, margin.top] + ')');

In this case, you need parentNode to get the actual svg, that is the parent of your group.

But if your "svg" is not a g, remove parentNode.

Upvotes: 1

Related Questions