我已经经历了很多例子，但是找不到我要找的东西。我有一张图表，里面有54个小条形图。我想实现以下缩放功能：
1）默认情况下，图表显示在大小为400x400的svg容器中。单击svg容器的背景时，整个图表会重绘/弹出更大的显示，例如800x800，但不会打扰html页面中的其他元素。
2）每个小条形图在svg中都有一个单独的容器。单击条形图时，只有该图表在更大的显示中展开/弹出，而图表的其余部分仍然具有相同的大小。
如何实现这两个功能？
提前致谢！
答案 0 :(得分：0)
我认为你所描述的是当前页面顶部的模态div（或对话框）。如果是这样，您需要两份图表副本。一个是原始（400x400），另一个是模态弹出（800x800）。由于弹出窗口是一个完全独立的SVG，因此可以进行不同的缩放（显示所有54个小条形图或一个条形图）。
应该修剪弹出窗口，如果您要缩放以显示一个条形图，则其他条形图将不可见。您可以对其进行优化，以便在单击一个条形图时，弹出框一次只绘制一个条形图。
popover可以是一个简单的div，具有高z顺序或对话框。这是一个jQuery dialog。有很多。
您还需要在主要SVG组的每个图表组上单击处理程序。或者，您可以为所有条形图设置一个点击处理程序，并计算您何时在背景或单个条形图上。
g.on('click' , function(d){ ...do the zoom... });