將CSV數據綁定到SVG使用AngularJS繪圖

我已經開始爲我的僱主使用由Adobe Illustrator CC，HTML，CSS和AngularJS生成的SVG平面佈置圖繪製縮小的概念驗證平面佈置圖應用程序。將CSV數據綁定到SVG使用AngularJS繪圖

這個想法是有一個包含靜態格子/辦公室號碼的平面圖，並將該平面圖與CSV文件結合，並定期更新人事數據，並在我們的Intranet上提供信息。

雖然我是AngularJS/SVG的新手，但我在跟蹤example獲取美國地圖，到目前爲止取得了一些相當不錯的進展，但現在我需要映射CSV數據（人員）到SVG（隔間），我不知道如何繼續。

從上面鏈接的例子看來，作者似乎已經用Angular注入了一個「sg-click」指令到SVG DOM中：$ compile當被點擊時觸發SVG DOM的ID的JS Alert（）：

link: function (scope, element, attrs) { 
     scope.elementId = element.attr("id"); 
     scope.regionClick = function() { 
      alert(scope.elementId); 
     }; 
     element.attr("ng-click", "regionClick()"); 
     element.removeAttr("region"); 
     $compile(element)(scope); 
    }

我想知道如果同樣的事情是可能的CSV數據，IE：

在SVG（櫃ID）
在CSV內環外環（人事/隔間ID）數據
如果機櫃ID與人員ID匹配，則將CSV數據注入到該SVG節點。

因爲我有這裏包括由於標籤和外部文件的限制功能代碼中的一些困難，我創建了一個Plunk，在這裏你可以查看上下文與運行在當前狀態下的外部文件一起的一切。

謝謝。

來源

2016-12-02 jazzBox

與同事交談後，他建議我：

轉換的CSV列表到一個數組。
將數組加載到某種容器中。
當用戶點擊隔間時。
遍歷數組，看看是否有匹配的基於櫃子ID。

因爲這是我第一次嘗試Angular，所以我的實現可能不正確，但我創建了一個新的plunk來反映最新的代碼更改。

謝謝。

Plunk

來源

2016-12-06 22:31:24 jazzBox

將CSV數據綁定到SVG使用AngularJS繪圖

回答

相關問題