有很多Lumira可视化的例子，其中滚动条将是一个很大的优势-特别是当你想可视化大数据集，但你不想你的图形被压扁。因此，风控大数据，一些开发人员已经想到了使用foreignObject元素将DIV容器嵌入到内容svg中，然后使用"overflow:auto；"css属性激活滚动条。

基本上，大数据啥意思，这种方法是可行的，但是foreignObject元素存在许多问题。使用foreignObject的一个真正的大问题是滚动条确实会出现，并且在使用触摸板或鼠标滚轮时可以工作，但至少在当前版本的Lumira中，滚动条是不可点击/拖动的。

foreingObject的另一个缺点是并非所有浏览器都支持它。虽然在使用嵌入式chromium浏览器的Lumira内部使用扩展时这不是问题，但是在SAP BusinessObjects Design Studio中使用扩展并且用户访问它时，这可能会成为问题，例如，由于这些原因，我想向您展示一种稍有不同的、在我看来更容易实现Lumira扩展中滚动条的方法。

步骤1：使用DIV扩展模板而不是SVG

以便在扩展中使用可滚动的DIV，而不使用foreignObject元素，我们必须将扩展类型从SVG更改为DIV（如果它还不是DIV扩展）。因此，在render函数中提供的主容器将是一个普通的div而不是svg。

现在您可能会有点困惑，因为您希望在扩展中使用d3.js和svg图形，但是如果没有svg容器，您将如何做到这一点？好吧，别害怕。第二步解决了这个问题。让我们看看如何更改扩展类型：

如果您正在创建新的扩展项目，只需在快速布局配置步骤中为绘图区域设置选择"技术：使用DIV"。

如果您正在修改现有扩展，打开流量.js并将flow对象的属性"type"更改为"DIV"：

请注意，云服务器购买，您的"container"——呈现函数中提供的对象现在是DIV容器，而不是SVG容器，这意味着您不能直接将SVG元素附加到它！

第二步：将DIV和SVG附加到主容器

现在我们已经将容器的类型更改为DIV，我们可以直接将可滚动的DIV附加到它，然后将SVG容器作为子容器附加：

转到渲染.js。在渲染函数开始时，首先从容器中删除所有内容，以确保在重新呈现时不会创建重复内容。

现在您可以将可滚动DIV附加到容器中，并通过设置相应的css属性将其宽度和高度设置为容器宽度和高度，以确保它填充整个容器，并且不会浪费资源空间。

对div应用一个特定的css类，这样您就可以在第3步中单独设置css中的滚动条行为。

现在您必须找出可视化需要多少空间，因为您必须设置SVG容器的宽度和高度。例如，物联网关键技术，一个水平条形图，超算云，其中每个条形图需要40px，因此SVG容器的高度至少应为要显示的条形图的数量乘以40。

将一个具有计算出的宽度和高度的SVG容器附加到可滚动div中。现在您可以像在任何其他扩展中一样继续，只需将所有内容添加到先前创建的SVG容器中，而不是将其添加到主容器中。

第3步：设置CSS属性以启用滚动条

为了激活DIV容器的滚动条，您必须设置溢出CSS属性。您可以单独激活水平和垂直滚动条，也可以同时激活两个滚动条。