d3js：缩放到大于 svg 大小的显示答案

【问题标题】：d3js: zooming to a display bigger than svg sized3js：缩放到大于 svg 大小的显示
【发布时间】：2014-04-29 15:37:45
【问题描述】：

我浏览了很多示例，但找不到我想要的东西。我有一个图表，里面有 54 个小条形图。我想实现以下缩放功能：

1) 默认情况下，图表显示在大小为 400x400 的 svg 容器中。单击svg 容器的背景时，整个图表会重新绘制/弹出到更大的显示，例如 800x800，但不会干扰 html 页面中的其他元素。

2) 每个小条形图在svg 中都有一个单独的容器。单击条形图时，该图表会在更大的显示中展开/弹出，而图表的其余部分仍具有相同的大小。

这两个功能如何实现？？

提前致谢！

【问题讨论】：

您需要两个单击处理程序来将新图形添加为 SVG 中的单独组或新 SVG。
@LarsKotthoff 我不确定新的 SVG 元素如何在不干扰其他元素的情况下呈现。我发现的所有示例都是在 SVG 元素中缩放图形，但我想要一个新的放大图形弹出（更可能是一个新的 SVG），就像新的放大图形只是放在基本图形的顶部，然后再次单击将删除新图形，再次留下基本图形。如何实现？
SVG 元素不会相互影响。您可以添加一个新的而不影响现有的。
您是否会考虑允许用户缩放/平移到特定图表？如果是这样，d3 有一个很好的鼠标滚轮缩放行为。

【解决方案1】：

我认为您所描述的是当前页面顶部的模态 div（或对话框）。如果是这样，您将需要两份图表副本。一个是原始的（400x400），另一个是模态弹出框（800x800）。由于弹出框是一个完全独立的 SVG，它可以进行不同的缩放（显示所有 54 个小条形图或一个条形图）。

弹出框应该被剪裁，因此，如果您要缩放以显示一个条形图，则其他条形图将不可见。您可以对其进行细化，以便在单击一个条形图时，弹出框一次仅绘制一个条形图。

弹出框可以是简单的div，具有高 z 顺序或对话框。这是一个 jQuery dialog。有很多。

您还需要主 SVG 组的每个图表组上的点击处理程序。或者，您可以为所有条形图设置一个单击处理程序，并计算您何时在后台或单个条形图上。

g.on('click' , function(d){ ...do the zoom... });

【讨论】：