AngularJSを使用したSVG図面へのCSVデータのバインド

Question

Adob​​e Illustrator CC、HTML、CSS、AngularJSで生成されたSVGフロアプラン図面を使用している私の雇用者のために、コンセプト実証フロアプランアプリケーションを開始しました。

アイデアは、静的なキュービクル/オフィス番号を含むフロアプランを作成し、そのフロアプランと、定期的に更新される人事データを含むCSVファイルと結び付けて、イントラネット上で情報を利用できるようにすることです。

私はAngularJS/SVGで初めてですが、米国の地図についてはexampleをフォローしていましたが、かなり良い進歩を遂げましたが、現在私はCSVデータをマップする必要があります）をSVG（キュービクル）に追加して、どのように進めるか分かりません。

上記の例から、著者はSVG DOMのIDのJS Alert（）を起動するAngular。$ compileを使ってSVG DOMに "sg-click"ディレクティブを注入したようです：同じことは、CSVデータ、IEで可能である場合

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（人事オーバーSVG（キュービクルID）

内部ループ上

1. 外部ループ/キュービクルID）データ
2. キュービクルIDが人物IDと一致する場合は、そのSVGノードにCSVデータを挿入します。私はここに、タグや外部ファイルの制限のため、機能コードを含むいくつかの困難を持っておりますので

は、私はあなたが現在の状態で動作している外部ファイルと一緒にコンテキスト内のすべてを見ることができPlunkを、作成しています。

ありがとうございました。

Answer 1

同僚と話をした後、彼は私ことが示唆された：

1. 配列にCSVリストに変換します。
2. 何らかの種類のコンテナに配列をロードします。
3. ユーザーがキュービクルをクリックしたとき。
4. 配列全体を繰り返し、キュービクルIDに基づいて一致するものがあるかどうかを確認します。

これはAngularの最初の試みであるため、実装が間違っている可能性がありますが、最新のコード変更を反映するために新しいコードを作成しました。

​​

ありがとうございました。

Plunk