Question

尝试将Mike Bostock的zoomable treemap转换为React组件。部分方式但不确定当数据依赖于渲染的DOM（即宽度）时，在组件之间传递数据的最佳方法。

遇到了Ben Smith关于混合React和D3js的blog。好东西。

使用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必须是固定值而不是procnts。我想要观察窗口的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);不会做你所希望的，只会返回内联样式。你需要抓住计算出的宽度。有一些示例说明如何在this long answer on zooming结束时执行此操作。

Reactjs与D3js树图

1 个答案: