我在我的项目中集成了 D3。任何时候都会出现异常“无法初始化javascript连接器,因为没有找到javascript init函数”
这是我的代码 MainUI
package testd323.asdg;
import java.util.ArrayList;
import java.util.List;
import com.company.grafiktest5.ui.MainView;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Widgetset;
import com.vaadin.data.validator.IntegerRangeValidator;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.xdev.ui.XdevUI;
import com.xdev.ui.navigation.XdevNavigator;
@Theme("mytheme")
@SuppressWarnings("serial")
@Widgetset("CircleD3.circle.AppWidgetSet")
@com.vaadin.annotations.JavaScript( {"d3.v3.min.js",
"CircleD3_circle_Diagram.js"} )
public class MainUI extends XdevUI {
final VerticalLayout layout = new VerticalLayout();
final TextField xCoordField = new TextField("X");
final TextField yCoordField = new TextField("Y");
final Button button = new Button("move circle");
final Diagram diagram = new Diagram();
final List<Integer> coords = new ArrayList<>();
@Override
protected void init(final VaadinRequest request) {
configureIntegerField(this.xCoordField); //not interesting, just adding converter/validator to the textFields
configureIntegerField(this.yCoordField);
this.button.addClickListener(new Button.ClickListener() { //ATTENTION! Here we get the coordinates from the textfields and apply them to our Diagram via calling diagram.setCoords()
@Override
public void buttonClick(final Button.ClickEvent event) {
if(MainUI.this.xCoordField.isValid() && MainUI.this.yCoordField.isValid()){
MainUI.this.coords.clear();
MainUI.this.coords.add(Integer.parseInt(MainUI.this.xCoordField.getValue()));
MainUI.this.coords.add(Integer.parseInt(MainUI.this.yCoordField.getValue()));
MainUI.this.diagram.setCoords(MainUI.this.coords);
}
}
});
//now we build the layout.
this.layout.setSpacing(true);
this.layout.addComponent(this.xCoordField);
this.layout.addComponent(this.yCoordField);
this.layout.addComponent(this.button);
this.layout.addComponent(this.diagram); //add the diagram like any other vaadin component, cool!
setContent(this.layout);
}
private void configureIntegerField(final TextField integerField) {
integerField.setConverter(Integer.class);
integerField.addValidator(new IntegerRangeValidator("only integer, 0-500", 0, 500));
integerField.setRequired(true);
integerField.setImmediate(true);
}
图表.Java
package testd323.asdg;
import java.util.List;
import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
@JavaScript({"d3.v3.min.js",
"testd323.asdg.diagram_connector.js"})
public class Diagram extends AbstractJavaScriptComponent {
public void setCoords(final List<Integer> coords) {
getState().setCoords(coords);
}
@Override
public DiagramState getState() {
return (DiagramState) super.getState();
}
}
DiagramState.java
package testd323.asdg;
import java.util.List;
import com.vaadin.shared.ui.JavaScriptComponentState;
public class DiagramState extends JavaScriptComponentState {
private List<Integer> coords;
public List<Integer> getCoords() {
return this.coords;
}
public void setCoords(final List<Integer> coords) {
this.coords = coords;
}
}
diagram_connector.js
window.testd323_asdg_Diagram = function() {
var diagramElement = this.getElement();
var diagramFrame = d3.select(diagramElement).append("svg:svg").attr("width", 500).attr("height", 500);
diagramFrame.append("svg:circle").attr("cx", 250).attr("cy", 250).attr("r", 20).attr("fill", "red");
this.onStateChange = function() {
var coords = this.getState().coords;
d3.selectAll("circle").transition().attr("cx", parseInt(coords[0]));
d3.selectAll("circle").transition().delay(500).attr("cy", parseInt(coords[1]));
}
希望任何人都可以帮助我。谢谢!