在 JavaFX Webview 中使用 D3 缩放答案

【问题标题】：Using D3 zoom in JavaFX Webview在 JavaFX Webview 中使用 D3 缩放
【发布时间】：2015-06-18 20:48:02
【问题描述】：

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

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 来渲染图形

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

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

谢谢

【问题讨论】：

标签： javascript d3.js webview javafx javafx-8

【解决方案1】：

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

JavaFX 只是用鼠标滚轮上的一个“提示”从缩放的最小比例跳到最大比例 :(。如果您在特定范围内指定它，它可能适合您。例如使用它来缩放在外面一点点。

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

目前为止最好的...希望有答案！

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

【讨论】：

【解决方案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

【讨论】：