d3.js - Reactjs 与 D3js 树形图

Question

尝试转换 Mike Bostock 的 zoomable treemap到 React 组件中。已经完成了一部分，但不确定当数据取决于渲染的 DOM(即宽度)时在组件之间传递数据的最佳方式。

遇到了本·史密斯的blog关于混合 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。我想我必须观察窗口的调整大小事件，选择新的 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末尾有一些如何操作的示例。 .