D3.js 使用D3js树映射对JS进行反应

试图将Mike Bostock的转换为React组件。这是其中的一部分，但不确定当数据取决于渲染的DOM（即宽度）时，在组件之间传递数据的最佳方式

偶然发现本·史密斯关于混合React和D3js的文章。好东西

使用引导控制CSS样式。在相对容器中定义了svg元素的绝对位置和最大宽度（100%）：

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

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

因此，svg元素的宽度随着屏幕大小的改变而改变。假设树映射节点属性（如x、y、dx、dy）必须为固定值，而不是procents。考虑到我必须观看窗口的调整大小事件，选择新的svg元素维度（“parseInt（d3.select（'.svg content'））.style（'width'），10）；”）并强制Reactjs重新渲染（“React.renderComponent”）。

您有两个选择：

• 将当前高度和宽度指定给树状图布局，并在每次高度和宽度更改时重新计算树状图；或者

• 使用默认大小计算树状图布局（最大高度和宽度将为1，其他为1的比例），并在绘制矩形时使用当前高度和宽度作为比例因子

然后，当高度或宽度更改时，只需重新绘制，而不需要重新计算布局。由于您试图将不同的组件分开，因此这似乎是最明智的方法。它也更有效，因为您只运行一次布局函数。您可以从重画函数（当然可以访问svg节点）中获取当前的高度和宽度，布局组件不需要知道任何关于尺寸的信息

---

哦，我恐怕

parseInt（d3.select（'.svg content'）.style（'width'），10）不会做您希望的事情，它只返回内联样式。您需要获取计算的宽度。最后有一些示例说明了如何执行此操作。
我不确定问题是什么：您不确定如何访问SVG高度和宽度，还是不确定如何将动态高度和宽度与树形图布局集成？将重写此问题。谢谢！！我不知道如何使用layout方法（Mike的代码），其中设置了x、y、dx、dy坐标（？最大高度和宽度==1？）。您的意思是简化layout函数，基本上只是在子对象上递归执行“treemap.nodes（…）”。这将使x、y、dx、dy的比值偏离最大1x1。然后，当我用Reactjs渲染时，也就是说，我必须获取每个rect元素的实际宽度/高度并缩放它们。啊，我注意到这是您正在使用的可缩放树形图。这有点复杂，因为它已经有了缩放功能来处理缩放。为了避免额外的复杂性，我会通过改变x和y刻度上的范围来匹配当前的高度或宽度来进行缩放（参见文章中的链接以获取示例）。不要对布局功能做任何操作。