1

我正在尝试使用 BasicPrimitives API 创建组织结构图。这个特定的 API 采用 div id 或类，并用图表动态填充其内容。我想添加 API 不提供的放大和缩小功能，但是我没能实现。我想要的是模仿电脑游戏中的视口，里面的所有东西都应该按比例放大或缩小，每个部分都应该通过滚动可见。我试过transform: scroll()div 但它不能缩放整个内容。实际上，我不确定它是否有效，但我无法通过滚动访问我的大部分图表。然后我尝试了 zoomooz API，但又失败了。我检查了这个和这个，但我无法让它工作。

我的 div 如下：

<div id="diagram" style="height: 400px; width: 946px;">
</div>

在其中，我使用的 API 创建了另一个包含所有图表等的 div。如果我使用以下代码对其进行缩放，则滚动无法到达图表的某些部分：

jQuery(".orgdiagram > div").css({
    transform: "scale(1.25)"
});

连同上面的代码，我尝试改变高度和前后比例，但效果不佳。我对网络技术很陌生。

这是情况的屏幕截图，上半部分是预缩放版本。下半部分是后比例。我的问题是，有什么问题？为什么滚动在缩放后表现得很奇怪，我该如何解决这个问题。

PS：抱歉审查员，但它们是私人信息。

4

2 回答 2

1

没有必要这样做。图表支持 iPad 上的缩放手势。您可以使用基于 CSS 的缩放变换来放大/缩小，但在普通浏览器上它很难看，所以它被关闭了。如果您需要等效的缩放效果，最好的解决方案是创建 2-3 个具有不同大小的项目模板并在它们之间自动切换。或者，如果您需要小图表，只需将您的项目模板变小。请参阅网站上的示例。

在此处输入图像描述

于 2013-09-06T22:18:46.233 回答
1

我认为您应该使用padding-rightor left（不确定是哪一个，因为它们的行为有时会有所不同），因为它们似乎是“查看图表”的问题，或者您在其中添加的任何内容都会出现。例子：

padding-right: 10px; /*same as left*/

编辑

我还建议您使用表格或菜单（ul，li）来制作这些图表，它更容易并且您可以添加:last-child，以便您可以将最后一个编辑为 10px 右/左。

于 2013-08-15T11:55:37.893 回答