3

Trying to convert Mike Bostock's zoomable treemap into React components. Part of the way there but not sure about the best way to pass around data between components when that data depends on the rendered DOM (i.e. width).

Came across Ben Smith's blog about mixing React and D3js. Great stuff.

Using Bootstrap to control the CSS styling. Defined the svg element with an absolute position and max width (100%) inside a relative container:

 .svg-container {
   position: relative;
   padding-bottom: 30%;
   overflow: hidden;
   }

 .svg-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

So the width of the svg element changes as the screen is resized. Assuming that the treemap node attributes like x,y,dx,dy have to fixed values not procents. Thinking I have to watch the window's resize event, pick off the new svg element dimensions ("parseInt(d3.select('.svg-content').style('width'), 10);") and force Reactjs to re-render ("React.renderComponent").

Bendy
  • 3,506
  • 6
  • 40
  • 71
Matthew Campbell
  • 1,864
  • 3
  • 24
  • 51

1 Answers1

1

You have two choices:

  • give the current height and width to the treemap layout, and recalculate the treemap every time the height and width change; or,

  • calculate the treemap layout with the default size (the maximum height and width will be 1, everything else a proportion thereof), and use the current height and width as a scaling factor when you draw the rectangles.

Then, when the height or width changes, you only need to redraw, not recalculate the layout. Since you're trying to keep different components separate, that seems the most sensible approach. It also is just more efficient, since you're only running the layout function once. You can just grab the current height and width from within your redraw function (which will of course have access to the svg node) and the layout component doesn't need to know anything about the dimensions.

Oh, and I'm afraid parseInt(d3.select('.svg-content').style('width'), 10); won't do what you're hoping, that only returns inline styles. You'll need to grab the computed width. There are some examples of how to do it at the end of this long answer on zooming.

Community
  • 1
  • 1
AmeliaBR
  • 27,344
  • 6
  • 86
  • 119
  • Thanks!! Not sure I understand what to do with the layout method (Mike's code), where the x,y,dx,dy coordinates are set (? maximum height and width == 1 ?). – Matthew Campbell Feb 27 '14 at 09:42
  • do you mean to dumb down the layout function to basically just recursively execute "treemap.nodes(...)" on the children. This should put the x,y,dx,dy in ratios off a max 1x1. Then when I render with Reactjs that is when I have to fetch the actual width/height and scale these for each rect element. – Matthew Campbell Feb 27 '14 at 12:16
  • Ah, I was paying attention that it's the zoomable treemap you were working with. That's a little more complicated because it already has a scale function to handle the zooming. To avoid extra complication, I would do the scaling by changing the range on the x and y scales to match the current height or width (see the link in the post for examples). Don't do anything to the layout function. – AmeliaBR Feb 27 '14 at 15:56