D3.js D3 v4仅在X维中缩放分区布局

试着围绕D3V4缩放这个特殊的用例来思考。到目前为止，我的示例如下：

我能够根据需要绘制我的初始分区布局（我忽略了文本定位和颜色等复杂性），但我在正确缩放方面做得还不够

目标是在单击svg rect元素时进行缩放

所谓“缩放”，我指的是与所述默认行为有所不同的东西：

• 完全禁用除单击元素之外的任何功能-没有通常与D3缩放相关的拖动、平移或鼠标滚轮活动
• 单击svg rect元素时，该元素仅在X维中展开（或收缩），以便其左侧邻接顶级svg的g容器的左侧，其右侧邻接顶级svg的g容器的右侧。
  • 换句话说，单击的元素正好成为图表的宽度
• 所有其他垂直“在”单击的g/rect元素上的其他g/rect元素应适当缩放/转换
• 所有其他垂直“在”单击的元素下面的元素实际上不需要更改，因为我们单击的元素将占据图表容器宽度的100%

我已经走了多远：

• 我已经计算了比例因子（k）-不确定是否正确。目标是将缩放因子设置为使单击元素的宽度扩展/收缩为svg宽度的任何值
• 我已经计算了x（tx）的变换，它将导致封装rect元素的g元素的左侧与svg的左侧对齐
• 使用k和tx，我使用d3.zoomIdentity.translate（tx，0.scale）（k）创建缩放变换
• 现在，我选择所有包含矩形的g元素，将当前的transform=“translate（x，y）”分开，并将缩放变换应用到translate的x部分-这应该将元素的左侧移动到svg的左侧
• 接下来，我选择每个g元素下的rect，并对width属性应用缩放变换

这似乎让我离最终目标更近了，但我确信我错过了一些东西：

• 我真的有必要像对待g元素那样分解transform=“translate（x，y）”吗
• 如果我多次单击某些元素，缩放比例会不断增加。我需要两方面：
  • 保持原始的缩放比例，以便我可以重置为它，或者只需单击最低的rect元素就可以返回到它
  • 如果单击一个元素，它已经是100%宽度了-我需要永远不允许缩放超过100%宽度
• 第一次单击任何给定元素时，都会将其扩展到预期的100%宽度，但并非所有元素的祖先都会正确缩放-我不在乎祖先是否会扩展到视口边缘以外的任意一端，但某些祖先元素会完全离开视口，这一点我无法解释