在現有SVG上應用縮放比例（d3.js v4）

我嘗試在d3.js（版本4）中使我的SVG可縮放。在現有SVG上應用縮放比例（d3.js v4）

你可以看到我嘗試在這裏：JSFiddle

HTML

<svg id="mySVG" width="800px" height="600px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: lightgrey;"> 
    <g> 
    <path d="M 0 0 L 100 0 L 100 20 L 0 20 Z" fill="red"></path> 
    <path d="M 500 500 L 600 500 L 600 520 L 500 520" fill="green"></path> 
    </g> 
</svg>

$(function() { 
    var svg = d3.select("#mySVG") 
    .call(d3.zoom().on("zoom", function() { 
    svg.attr("transform", "translate(" + d3.event.transform.x + " " + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")"); 
    })); 

    // For test purposes 
    //$('#mySVG').css('transform', 'scale(2)'); 
});

事實上，一切似乎因爲當我在谷歌的檢查工作代碼檢查員，專注於我的SVG元素，我看到了trans的價值當我向前/向後滑動鼠標時，後期和比例發生變化。但是沒有任何事情發生在實際的元素上，這很奇怪，因爲我也嘗試通過純jQuery來改變這些縮放/平移值，並且SVG通過正確縮放來響應。

任何人都可以指出我在這個任務的正確方向嗎？

有關記錄，這裏是d3.zoom()函數的官方文檔。

來源

2016-08-04 Anwar Nairi

你申請的屬性轉化爲你的svg，這不是valid。在你的jQuery例子中，你正在將風格轉換成你的svg，這是有效的。通常的d3方法是將縮放區域包裝在g中，並將屬性轉換應用於該區域。另外你缺少你翻譯一個逗號：在A G

d3.event.transform.x + " " + d3.event.transform.y //<-- there should be a comma in there

來源

2016-08-04 17:04:33 Mark

包裝和應用轉換現在的工作：[**的jsfiddle更新**]（https://jsfiddle.net/ghpo6ayo/6/）。當我放大縮放路徑時，縮放行爲正確，但當鼠標移動到不包含路徑的「」標籤區域上時（但這不是此問題的目的），仍然存在錯誤。 –

編輯：我必須綁定'g.call（d3.drag（）。on（'drag'，function（）{/ * ... * /}）））;'在縮放之前解決這個問題。 –

添加ID到你的G元素，並應用縮放到它，而不是SVG根

來源

2016-08-04 17:02:59

在現有SVG上應用縮放比例（d3.js v4）

回答

相關問題