题
试图转换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”)。
解决方案
你有两种选择:
-
将当前的高度和宽度提供给Treemap布局,每次高度和宽度变化时重新计算Treemap;或者,
-
使用默认大小(最大高度和宽度为1,所有其他一部分)计算Treemap布局,并在绘制矩形时使用当前高度和宽度作为缩放因子。
然后,当高度或宽度更改时,您只需要重绘,而不重新计算布局。由于您正在尝试将不同的组件保持分开,因此似乎是最明智的方法。它也是更高效的,因为您只运行一次布局功能。您可以抓住从Redraw函数中的当前高度和宽度(当然当然可以访问SVG节点),并且布局组件无需了解尺寸的任何内容。
哦,我担心生成的世代odicetagcode不会做你希望的东西,它只返回一线样式。您需要抓取计算的宽度。有一些例子是在在缩放
上的长答案不隶属于 StackOverflow