Question

我是d3.js的新手，我被要求为我的应用程序创建一个用于放大/缩小功能的PoC。在谷歌和stackoverflow的帮助下，我创建了一个demo

var zoom = d3.behavior.zoom()
     .scaleExtent([0.5, 10])
     .on("zoom", zoomed);
 function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale("+ d3.event.scale + ")");
}

//zoom from mouse scroll

var container = d3.select("svg").select("g");
var testSvg = d3.select("#testZoom");
testSvg.call(zoom);

//zoom from slider

function zoomWithSlider(scale) {
var container = d3.select("svg").select("g");


var h = container.attr("height"), w = container.attr("width");

// Note: works only on the <g> element and not on the <svg> element
// which is a common mistake

container.attr("transform",
        "translate(" + w/4 + ", " + h/4 + ") " +
        "scale(" + scale + ") " +
        "translate(" + (-w/4) + ", " + (-h/4) + ")");
}
$(function() {
$( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0.5,
    max: 10,
    value: 10,
    slide: function( event, ui ) {
        zoomWithSlider(ui.value/5);
    }
});
});

基本上我试图用鼠标滚动和滑块进行缩放，但似乎没有什么问题：

放大/缩小仅在光标位于图表时才有效，如果光标在图表之间缩放并不起作用我无法弄清楚原因。
使用滑块也可以放大/缩小，但缩放不一致且滑块不移动。

我是JS编码的新手，你可能会觉得我的代码多余了，但请耐心指导我，哪里出错了...

提前致谢.. !!!

Answer 1

您需要实际捕获缩放事件（路径和它们之间的空间是空白空间）。我添加了一个<rect>作为#testZoom组的第一个孩子来捕获鼠标事件。
在js中设置滑块时，您使用了orientation: "vertical"，但在使用了ui-slider-horizontal的html中。我想这在jquery-ui的某个地方引起了一个错误，因为它们不匹配。

See updated fiddle

在d3.js中使用滑块和鼠标滚动进行缩放

1 个答案: