带有D3js树形图的ReactJS

Question

试图将Mike Bostock的可缩放树图转换为React组件。 其中的部分方法，但是当数据依赖于呈现的DOM（即宽度）时，不确定在组件之间传递数据的最佳方法。

浏览了本·史密斯（Ben Smith）关于混合React和D3js的博客 。 好东西。

使用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元素的宽度会随着屏幕调整大小而改变。 假设树形图节点属性（例如x，y，dx，dy）必须为固定值而不是procents。 认为我必须观看窗口的resize事件，选择新的svg元素尺寸（“ parseInt（d3.select（'。svg-content'）。style（'width'），10）;“）并强制Reactjs重新-render（“ React.renderComponent”）。

Answer 1

您有两种选择：

• 将当前的高度和宽度提供给树图布局，并在每次改变高度和宽度时重新计算树图； 要么，

• 计算具有默认大小的树图布局（最大高度和宽度将为1，其他大小均按比例），并在绘制矩形时使用当前的高度和宽度作为缩放比例。

然后，当高度或宽度发生变化时，您只需要重新绘制，而无需重新计算布局。 由于您尝试将不同的组件分开，所以这似乎是最明智的方法。 由于您只运行一次布局功能，因此它也更加高效。 您可以从重绘功能（当然可以访问svg节点）中获取当前的高度和宽度，而布局组件不需要了解尺寸。

哦，我怕parseInt(d3.select('.svg-content').style('width'), 10); 不会做您希望的，只会返回内联样式。 您需要获取计算出的宽度。 在这个有关缩放的漫长回答的结尾，有一些如何进行此操作的示例。