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

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

1） 默认情况下，图表显示在大小为400x400的

svg

容器中。单击

svg

容器的背景，整个图表会重新绘制/弹出到更大的显示中，比如800x800，但不会干扰html页面中的其他元素

2） 每个小条形图在

svg

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

如何实现这两个功能

---

提前谢谢

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

爆米花 popover应该被剪裁，这样，如果您要缩放以显示一个条形图，其他条形图将不可见。您可以对其进行优化，以便在单击一个条形图时，popover一次仅绘制一个条形图

popover可以是一个具有高z顺序或对话框的简单版本。这里有一个jQuery。有很多

单击处理程序 您还需要在主SVG组的每个图表组上使用单击处理程序。或者，您可以对所有条形图使用一次单击处理程序，并在后台或单个条形图上进行计算

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

---

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