D3集成Vaadin（无法初始化JavaScript连接器）

Question

我有D3集成在我的项目中。 Anytimes而来的异常

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

Diagramm.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

“因为没有JavaScript的初始化函数被发现无法初始化JavaScript的连接器”

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

希望任何人都可以帮助我。 谢谢！

Answer 1

JavaScript文件需要在resources/testd323/asdg才能找到。