d3.js

我是d3.js的新手，并且我被要求为我的应用程序创建用于放大/缩小功能的PoC。与谷歌和计算器太大的帮助，我创建了一个demo d3.js

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代码，你可能会发现长我的代码冗余，但请容忍我，引导我我要去哪里错了...

在此先感谢..！！

来源

2016-01-20 pranay anand

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

See updated fiddle

来源

2016-01-20 16:39:05 ksav

感谢ksav .. !!! 它对我来说就像魅力一样，我将这个答案标记为正确 –

好吧，我想我在这里跳了枪，我今天发现了一个问题，当时我更仔细地查看了代码。第一次当我放大使用滑块时图像正在缩小，但之后，如果我进一步放大或进一步缩小它只要我不刷新页面就可以正常工作。我已经更新了小提琴[更新的小提琴]（https://jsfiddle.net/pranayanand/zncadz1c/10/） –

您可能想看看这个[Drag + Zoom + Slider示例]（http：// bl .ocks.org/bollwyvl/871b7c781b92fd0044f5），然后再继续。 – ksav

回答

相关问题