在JavaFX Webview中使用D3缩放

Question

我有一个呈现图形的JavaFX Webview（使用D3）。我想在JavaFX应用程序中实现此图上的“鼠标滚动缩放”（当鼠标悬停在webview顶部时）。我能够使用以下d3 js代码在Web浏览器上成功完成它

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 + ")");
}

但是，如果我在JavaFX应用程序的WebView中执行类似操作，图形最初会在WebView中呈现，但会滚动，只会消失，并且只有当我将鼠标滚动恢复到初始位置（应用程序启动时）时才会重新出现

以下代码是我如何使用WebView渲染图形

html lang-html prettyprint-override">        final URL urlLoadMainGraph = getClass().getResource("html/MainGraph.html");                
        weMainGraph.load(urlLoadMainGraph.toExternalForm());     

正在做的事情有什么问题吗？

谢谢

Answer 1

zoomhandler代码示例中似乎有一个bug。您可能希望从如下处理程序开始，然后继续：

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/html" target="_blank">github/javafxd3/demo/client/democases/behaviors/ZoomDemo.java

Answer 2

我不能提供一个解决方案，但我有同样的问题。问题是，你没有指定任何比例。

JavaFX只是通过鼠标滚轮上的一个“提示”从缩放的最小尺度跳到最大尺度：（。如果您在一定范围内指定它，它可能会适合您。例如，使用它向外缩放一点。

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

迄今为止最好的...希望有答案！

（附言：我无可奉告……这就是为什么这样回答。