在SplitPanel组件中奇怪地呈现SVG元素

Question

我对在水平/垂直SplitPanel组件中呈现svg元素有问题。

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

在源代码中，下面是窗口的主要布局。我使用VerticalLayout组件，然后使用Label组件作为div元素，其中创建并呈现svg元素。创建svg元素(网络图)的过程是用javascript编写的，其中svg元素在带有css类的div元素中呈现。

@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);

    }

}

向VerticalLayout组件中添加svg元素(源代码中的图形变量)，我得到了预期的结果：

​

​

然后，我尝试将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);

    }

}

结果是：

​

​

这个问题被渲染成图，因为图的节点被“卡住”在主窗口的顶部边缘。

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

这是我的源代码和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);
}