Question

我有一个JavaFX Webview，它呈现一个图形（使用D3）。我想实现'缩放鼠标滚动＆＃39;在JavaFX应用程序中的此图表上（当鼠标悬停在webview的顶部时）。我能够使用以下d3 js代码

在Web浏览器上成功完成

＆＃13;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().on("zoom", zoomHandler))
    .append('g');


function zoomHandler() {
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

＆＃13;

但如果我在JavaFX应用程序的WebView中做了类似的事情，那么图形最初会在WebView中呈现，但在滚动时，只是消失，只有当我将鼠标滚动到初始位置时才会重新出现（当申请开始了）

以下代码是我如何使用WebView呈现图形

＆＃13;

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

＆＃13;

正在做什么有什么问题吗？

谢谢

Answer 1

我无法提供解决方案，但我遇到了同样的问题。问题是，您没有指定任何比例。

JavaFX只是从缩放的最小刻度跳到最大刻度，鼠标滚轮上只有一个“尖端”:(。如果你在一定的范围内指定它，它可以为你工作。用这个例如来缩放外面一点点。

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height).call(d3.behavior.zoom().scaleExtent([0.75, 1]);

到目前为止最好的......希望能为你们做好准备！

（PS：我无法评论......这就是为什么会这样的答案。

Answer 2

您的zoomhandler代码示例中似乎存在错误。您可能希望从以下处理程序开始，然后从那里继续：

function zoomHandler() {
  alert('zoom');
}

这是一个更详细的d3缩放示例：

http://bl.ocks.org/mbostock/3892919

这是D3的JavaFx包装器，它还包含一个工作缩放示例：

https://github.com/stefaneidelloth/javafx-d3

https://github.com/stefaneidelloth/javafx-d3/blob/master/javafx-d3-demo/src/main/java/com/github/javafxd3/demo/client/democases/behaviors/ZoomDemo.java

在JavaFX Webview中使用D3缩放

2 个答案: