調用jQuery.UI幻燈片事件d3.js縮放行爲

Question

我有一個可縮放的SVG區域，有一些對象正在響應d3.js的縮放行爲（即mousewheel）。現在我試圖附加一個jQueryUI滑塊到我的應用程序，以遵循這些行爲。

例如，如果發生mousewheel縮放事件，slider應該相應地移動。另一方面，如果更改slider，則應發生zoom。

現在我有點不知所措，因爲小部件的滑動事件顯然沒有d3的縮放行爲translate和scale參數傳遞。

我見過一個與HTML5滑塊（here）類似的示例，但我無法獲得my version的幫助。

任何意見或建議？

:)獎勵積分>>>

• 我還需要隱藏/剪輯點（他們真的只是文本）超出圓的邊界。
• 無論如何，我可以通過縮放將點移動到他們的位置（如現在它的做法），但是不是縮放它們？
• 此外，爲了在開始時能夠完全放大，我需要更改哪些內容？

編輯：

所以，我所管理的最困難的部分（檢查here），但我現在還在試圖讓文字無法規模和剪輯的文本超過圓的邊境。有什麼想法嗎？

Answer 1

現在我有點失去了，因爲小部件幻燈片事件顯然 沒有D3的縮放行爲的轉換和調整參數 傳遞。

對於這個特定的問題，當你用滑塊放大，你應該使用滑塊值scale，並且可以給你translate SVG畫布的中心座標。

d3.event.translate在zoom event只是縮放完成的座標。

另外，爲了讓這個完全放大的 在一開始，我需要改變什麼？

只需將頁面開始scale設置爲最大縮放值。例如，以translate爲中心的項目。

編輯：

我還需要隱藏/剪輯點（他們真的只是文本）超越 圓的邊界。

我看到你已經在使用clipPath，但它不工作。這是因爲您也正在將變換應用到影響剪輯路徑的元素<g>。

最簡單的解決方案是爲clipPath創建頂部<g>元素，然後將包含項目的<g>連接到頂部。

更正代碼：

var topg = svg.append("g") 
       .attr("clip-path","url(#clip)"); 

var clip = topg.append("defs").append("svg:clipPath") 
       .attr("id", "clip") 
       .append("svg:circle") 
       //.attr("id", "clip-circ")// You had a typo here 
       .attr("cx", centerx) 
       .attr("cy", centery) 
       .attr("r", 149); 


var pointsGroup = topg.append("g") 
        .attr("id", "pointsGroup") 
        //.attr("clip-path", "url(#clip)");// no longer needed here