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

回答

相關問題