HTML页面中的JavaFX中的JavaScript回调（使用D3）

Question

在使用forcelayout时，我试图在选择D3（位于HTML页面中）中的节点时调用JavaFX方法。 我不确定我在这里做什么错

可以说我使用WebView来呈现HTML页面，该页面的D3用来绘制图形。 在选择其中一个节点时（使用D3的“ dblclick”属性），我想调用javaFX的方法

这就是我渲染WebView的方式

    weMainGraph = wvMainGraph.getEngine();
    weMainGraph.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
            public void changed(ObservableValue<? extends Worker.State> p, Worker.State oldState, Worker.State newState) {
                if (newState == Worker.State.SUCCEEDED) {
                    JSObject win = (JSObject) weMainGraph.executeScript("window");
                    win.setMember("javaObj", new Connector2(Scene2Controller.this));      
                    System.out.println("Scene2Controller.intiateMainGraph(): Called");
                }
            }
        }
    );   

    final URL urlLoadMainGraph = getClass().getResource("MainGraph.html");
    weMainGraph.load(urlLoadMainGraph.toExternalForm());

而MainGraph.html如下

<!DOCTYPE html>

<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 640; var height = 300;
// var w = window.innerWidth; var h = window.innerHeight;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(100)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("MainGraph.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); })
      .call(force.drag);


  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .on("click", click)
      .on("dblclick", doubleclick)
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  var texts = svg.selectAll("text.label")
                .data(graph.nodes)
                .enter().append("text")
                .attr("class", "label")
                .attr("fill", "black")
                .text(function(d) {  return d.name;  });

    function click(){
            d3.select(this).attr('r', 10).transition()
                .duration(3000)
                // .style("fill","yellow")
                .style("stroke","black")
                .style("stroke-opacity",1);
        }

    function doubleclick(){
        d3.select(this).transition()
            .duration(750)
            .attr("r", 5)
            .style("stroke-opacity",0);
        // javaObj.onclickLeftView();
        javaObj.onselectNode();
    }

    function alertBox() {
        window.alert("Executes");
    }


  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

     texts.attr("transform", function(d) {
        return "translate(" + (d.x+3) + "," + d.y + ")";
    });

    });
});

</script>

并且Connector2是

public class Connector2 {
private final Scene2Controller controller ;

public Connector2(Scene2Controller controller) {
    this.controller = controller ;
}

public void onselectNode() {
    try {
        System.out.println("Connector2.onselectNode(): Called");              
    } catch (Exception ex) {
        Logger.getLogger(Connector.class.getName()).log(Level.SEVERE, null, ex);
    }        
}
}

Answer 1

我没有详细研究您的示例，但是在编写javafx-d3包装器时，对我来说类似的问题是传递给javascript的动作侦听器一定不能是匿名类。 考虑了这一点之后，javafx和d3之间的交互对我来说非常好。

HTML页面中的JavaFX中的JavaScript回调（使用D3）

问题描述

1 个解决方案

解决方案1
0 2016-01-30 17:10:02

HTML页面中的JavaFX中的JavaScript回调（使用D3）

问题描述

1 个解决方案

解决方案1 0 2016-01-30 17:10:02

解决方案1
0 2016-01-30 17:10:02