Vaadin的Joint.js

Question

我正在尝试让joint.js API在Vaadin中运行。 我按照这个例子说明了如何使用AbstractJavaScriptComponent和Connector集成d3.js。

http://www.rapidpm.org/2013/10/13/using-javascript-libraries-(d3)-in-vaa.html

window.connector = function() {

var myElement = this.getElement();
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $(myElement),
    width: 1500,
    height: 700,
    model: graph
});
var rect = new joint.shapes.basic.Rect({
    position: { x: 100, y: 30 },
    size: { width: 100, height: 30 },
    attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});

var rect2 = rect.clone();
rect2.translate(300);

var link = new joint.dia.Link({
    source: { id: rect.id },
    target: { id: rect2.id }
});

graph.addCells([rect, rect2, link]);
}

在我的组件中，我在@Javascript注释中添加了必要的文件：

@JavaScript({"dagre.min.js","graphlib.min.js","joint.js","joint.layout.DirectedGraph.js","jquery.min.js","lodash.min.js","d3.js","d3.min.js","connector.js" })

public class Component extends AbstractJavaScriptComponent {
}

然后我将组件添加到视图中。问题是我真的不明白，如何访问myElement及其作用。我知道连接器工作正常，因为使用d3.js中的示例代码没有问题。如果我在此代码中添加myElement我在视图中看不到任何内容，我添加了组件。