0

I am trying to make a treemap responsive, however, the chart simply drifts off to the left, and to the bottom. As if there is something affecting x0 and y0. The chart does not respond to resizing, however I think this may have something to do with the width and heights... possibly affecting the position of the chart also. Or, is this simply a CSS issue? Very confused with this one. I imagine I am missing something obvious...

Plnkr: https://plnkr.co/edit/U7Zsbjy0zubnMwo1SHg8?p=preview

var svg = d3.select("#graph")
.append("svg")
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .attr('style', 'border:solid 2px blue')
    .attr('style', 'padding0px')
.call(responsivefy)
Kevin Waterson
  • 707
  • 1
  • 7
  • 23

1 Answers1

1

At line 156 you are doing

var newNode = node.enter()
            .append("g")
            .attr("class", "node");
            .attr("transform", "translate("+[fullWidth/2, fullHeight/2]+")")

The last line of that code block is why everything ends up bottom right, you are translating every group to start from the middle of the chart (instead of top left). If you remove it the chart looks ok. Here's your chart with that edited : https://plnkr.co/edit/RUhlH4rwopNKf4iDiUge?p=preview

As for making it responsive, you already set the viewbox attribute on the SVG to make it responsive. You don't need that extra function responsivefy on top of it. You seem like you used this answer for the responsive classes : https://stackoverflow.com/a/25978286/11487 but the order of the nodes in your markup was not quite there.

One thing that's important to note : when you use preserveAspectRatio with "xMinYMin meet" to get a responsive graph, you cannot use width and height instructions.

With that fixed up :

https://plnkr.co/edit/KADSH9GSX1E3lnpmhzjV?p=preview

Community
  • 1
  • 1
Hugo Migneron
  • 4,867
  • 1
  • 32
  • 52
  • "One thing that's important to note : when you use preserveAspectRatio with "xMinYMin meet" to get a responsive graph, you cannot use width and height instructions" - Noted – Kevin Waterson Nov 11 '16 at 00:14