如何獲得自定義SVG路徑在D3中正確縮放？

Question

我有一張地圖，我用D3渲染了包含SVG路徑的位置標記。我爲SVG路徑標記了標記，以便在地圖縮放時它們可以很好地縮放。但是，我似乎無法弄清楚如何使這些實際發生。

你可以看到我的示例代碼here。嘗試移動或縮放地圖，您會看到標記消失。

我認爲可能發生的情況是因爲我沒有在創建路徑元素時將路徑數據附加到路徑元素，所以地理路徑投影對象不知道如何縮放它。不知道爲什麼當我移動地圖時位置標記消失，我也不知道將數據附加到元素的正確方法。我嘗試將路徑數據傳遞給data()方法，但似乎沒有工作......任何想法？

謝謝！

Answer 1

它們正在消失，因爲在縮放功能中，您正在選擇並重新投影它們。

您使用變焦方法實際上並不需要您重新什麼項目，你可以簡單地做到以下幾點：

var zoom = d3.behavior.zoom().on('zoom', function() { 
    g.attr('transform', 'translate(' + d3.event.translate.join(',') + ') scale(' + d3.event.scale + ')'); 
    //g.selectAll('path').attr('d', path.projection(projection)); 
}); 

你可以看到，我已經註釋掉您選擇線路。基本上g.selectAll('path')也是選擇你的標記。你可能不想這樣做，因爲路徑實際上並不是首先投射出去的。儘管如此，縮放（幾何縮放）的平移/縮放方法不需要重新投影路徑。有關語義和幾何縮放示例，請參見http://bl.ocks.org/mbostock/3680957和http://bl.ocks.org/mbostock/3680999。