SplitPanel 组件中奇怪的渲染 SVG 元素

Question

我在水平/垂直 SplitPanel 组件中呈现 svg 元素时遇到问题。

我的 vaadin 项目包括用于渲染网络图的 javascript 组件。 javascript 组件使用 d3.js 库，网络图在父 div 元素中呈现为 svg 元素。

下面的源代码是窗口的主要布局。我使用 VerticalLayout 组件，然后使用 Label 组件作为 div 元素，在其中创建和呈现 svg 元素。创建svg元素（网络图）的过程是用javascript编写的，其中svg元素在div元素中呈现，css类为“.v-splitpanel-first-container”。

@SuppressWarnings("serial")
public class MyVaadinUI extends UI
{

    final Graph graph = new Graph();

    @Override
    protected void init(VaadinRequest request) {

        final VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        setContent(layout);

        Label div = new Label();
        div.setStyleName("v-splitpanel-first-container");
        div.setHeight(100, Sizeable.UNITS_PERCENTAGE);
        div.setWidth(100, Sizeable.UNITS_PERCENTAGE);

        layout.addComponent(div);
        layout.addComponent(graph);
        layout.setExpandRatio(div, 1);

    }

}

将 svg 元素（源代码中的图形变量）添加到 VerticalLayout 组件我得到了预期的结果：

然后我尝试将 svg 元素添加到 VerticalSplitPanel 组件而不是 VerticalLayout 组件：

@SuppressWarnings("serial")
public class MyVaadinUI extends UI
{

    final Graph graph = new Graph();
    public static final String brownFox = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. ";


    @Override
    protected void init(VaadinRequest request) {

        final VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        setContent(layout);

        // first main horizontal split panel
        final VerticalSplitPanel vertical1 = new VerticalSplitPanel();
        vertical1.setHeight("100%");
        vertical1.setSplitPosition(80, Sizeable.UNITS_PERCENTAGE);
        layout.addComponent(vertical1);

        vertical1.addComponent(graph);
        vertical1.addComponent(new Label(brownFox)); 
        layout.setExpandRatio(vertical1, 1);

    }

}

结果是：

问题是渲染图，因为图的节点“卡”在主窗口的顶部边缘。

您对如何解决这个问题有什么建议吗？

这是我的source code 和pom

Answer 1

您的 JS 代码可能会因 vaadin 在客户端运行时所做的缩放而感到困惑。如果您的 javascript 库有一个处理调整大小的钩子，那么您可以通过 Vaadin 提供的侦听器调用它。它看起来像这样：

window.cz_ario_socialgraphuisvg_Graph = function() {
    // ...
    this.updateSize = function(e) {
    e.element.somethingToUpdateTheSize(); // check d3 documentation
    };

    this.addResizeListener(element, this.updateSize);
}