Reactjs与D3JS Treemap

Question

试图转换Mike Bostock的 zoomable treemp 进入反应组件。部分方式，但不确定在这些数据取决于渲染的DOM（即宽度）之间的组件之间传递数据之间的最佳方法。

遇到了ben smith的博客关于混合反应和D3J。伟大的东西。

使用Bootstrap来控制CSS样式。在相对容器内使用绝对位置和最大宽度（100％）定义SVG元素：

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

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

.

因此SVG元素的宽度随着屏幕调整大小而变化。假设Treemap节点属性如x，y，dx，dy必须固定值，而不是Not Not Nopents。思考我必须观看窗口的调整大小事件，挑选新的SVG元素尺寸（“Parseint（D3.Select（”SVG-Content“）。样式（'宽'），10）;”）并强制反应re - 犯罪者（“反应.RenderComponent”）。

Answer 1

你有两种选择：

• 将当前的高度和宽度提供给Treemap布局，每次高度和宽度变化时重新计算Treemap;或者，

• 使用默认大小（最大高度和宽度为1，所有其他一部分）计算Treemap布局，并在绘制矩形时使用当前高度和宽度作为缩放因子。

然后，当高度或宽度更改时，您只需要重绘，而不重新计算布局。由于您正在尝试将不同的组件保持分开，因此似乎是最明智的方法。它也是更高效的，因为您只运行一次布局功能。您可以抓住从Redraw函数中的当前高度和宽度（当然当然可以访问SVG节点），并且布局组件无需了解尺寸的任何内容。

哦，我担心生成的世代odicetagcode不会做你希望的东西，它只返回一线样式。您需要抓取计算的宽度。有一些例子是在在缩放

上的长答案