d3.behavior.zoom（）移動圖形來代替角落中心

我想要一個鼠標滾輪變焦添加到我的炎爆：
我所做的是我編輯的這一段代碼：
d3.behavior.zoom（）移動圖形來代替角落中心

var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 10]) 
    .on("zoom", zoomed); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height * .52 + ")") 
    .call(zoom); 

function zoomed() { 
    svg.attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.scale + ')'); 
    //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}

的問題是，當頁面加載的一切似乎是確定，但是當mouswheel用於滾動旭日在左上角結束：

我能夠改變這個代碼來解決這個問題：

function zoomed() { 
    svg.attr("transform", "translate(" + width/2 + "," + height * .52 + ")scale(" + d3.event.scale + ")"); 
}

sunburst現在停留在中間，但是這不會縮放到光標的位置，並且不允許用戶進一步縮小。
任何建議如何我可以放大光標位置（如在第一個代碼示例中）沒有在左上角的sunburst disapering？

欲瞭解完整的代碼，請參閱JSfiddle，它不在這裏工作，但運行本地工作。

來源

2017-06-11 CodeNoob

d3.event.translate返回一個數組。因此，如果你想添加這些值（width/2和height/2），你必須單獨添加它們：

function zoomed() { 
    svg.attr('transform', 'translate(' + (d3.event.translate[0] + width/2) + 
     ',' + (d3.event.translate[1] + height/2) + ') scale(' + d3.event.scale + ')'); 
}

另外，如果你想使用你原來的縮放功能...

function zoomed() { 
    svg.attr("transform", "translate(" + d3.event.translate + 
     ")scale(" + d3.event.scale + ")"); 
}

...只是打破了SVG的選擇，對於羣分配的另一個名字：

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var foo = svg.append("g") 
    .attr("transform", "translate(" + width/2 + "," + height * .52 + ")") 
    .call(zoom);

來源

2017-06-11 18:55:07

我試圖替換爲您提供的一個「放大」功能，但是縮小進一步仍然不可能？ – CodeNoob

這是另一個**問題。我只在這裏解決中心問題。請保持每個問題一個問題。 –

我在我的問題中解決了這個問題：「這不會縮放到光標的位置，並且不允許用戶進一步縮小。」爲了清楚起見，我應該在最後一行加上。我會編輯它。你能否在你的回答中解決這個問題？ – CodeNoob

我用在莫寧標準d3.event.translate和d3.event.scale Omed功能，像這樣：

function zoomed() { 
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
}

這一切工作正常，除了整個sunburst跳到左上角，當我第一次滾動。它在我把它拖回到中間後糾正了它自己，但它很煩人。

我掙扎了幾個小時。最後我解決它通過對SVG改變viewBox屬性：

.attr({viewBox: "" + (-width/2) + " " + (-height/2) + " " + width + " " + height})

我從這個例子的想法：Basic Sunburst

來源

2018-01-26 11:29:01 Gary

d3.behavior.zoom（）移動圖形來代替角落中心

回答

相關問題