在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);
}