AmCharts - AmMap與自定義地圖顯示顛倒

Question

我已經按照AmCharts上的教程創建了一個自定義地圖，但是使用了我們之前系統中的SVG（英國的一個是一個例子，但我有大約2000個自定義SVG的定義區域/地區/區域集合）。

雖然地圖顯示沒有問題，但它顯示為顛倒。

有人可以幫助翻轉那些沒有重新創建所有SVG的東西嗎？

你可以在這里看到問題http://jsfiddle.net/aZt8N/830/

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.balloon.color = "#000000";

    var dataProvider = {
        mapVar: AmCharts.maps.UK,
        getAreasFromMap: true
    };

    map.dataProvider = dataProvider;
    map.write("mapdiv");
});

示例SVG（JSON格式）：

{
    "id": "19",
    "title": "Isle of Man",
    "d": "M-294128.0419983654 6005604.579318236 L-297849.15 6002052.63 L-302960.48 6004919.03 L-307536.97 6003878.02 L-308772.14 6004362.52 L-305875.18 6009275.65 L-304770.50193180586 6012664.048443736 L-302096.82 6020865.08 L-298362.66970319534 6023706.069639378 L-296413.32 6025189.16 L-291628.35136520385 6032625.148624786 L-288841.99 6036955.24 L-283264.74 6040009.53 L-281429.49 6039424.07 L-280324.93 6038202.8 L-280267.3142244041 6037728.901568649 L-278638.37 6024330.59 L-281236.71112765424 6021135.176051484 L-282416.08 6019684.8 L-283956.92 6015313.33 L-287114.60612506856 6012299.189836851 L-288129.6779798481 6011330.2623612285 Z"
                        }

Answer 1

我在這里實現了這個問題的解決方案：

http://jsfiddle.net/Fresh/rzL509qr/

結果是：

我將是第一個注意到它不是最優雅的解決方案，因為它涉及在 AmCharts渲染它的輸出之后使用SVG矩陣變換。 我還在應用程序中引入了jQuery來應用代碼來執行轉換（您可以在以后將其更改為javascript，我只是為了方便而使用jQuery）。

解決方案涉及轉換包含map的組（即'g'元素）

<g transform="matrix(1 0 0 -1 0 370)">

該變換矩陣反映了通過圖像中心的水平線的所有內容。 “370”是SVG的高度（370px）。

我使用以下方法應用了這種矩陣變換：

$('svg g:nth-child(8)').attr('transform','matrix(1 0 0 -1 0 370)');

更新

雖然這個解決方案正確地反轉了坐標，但是向上/向下拖動功能已被打破（doh！）。 我不會刪除這個答案，因為它可能有所幫助，希望有人會對如何在這種情況下反轉鼠標y軸有一個明智的想法！

您可以嘗試應用此轉換，反轉左右箭頭，但禁用拖動工具。 這應該允許用戶在地圖周圍直觀地導航，但是沒有使用鼠標的便利。