使用 AngularJS 将 CSV 数据绑定到 SVG 绘图答案

【问题标题】：Binding CSV Data to SVG Drawing with AngularJS使用 AngularJS 将 CSV 数据绑定到 SVG 绘图
【发布时间】：2017-04-17 20:33:28
【问题描述】：

我已经为我的雇主启动了一个按比例缩小的概念验证平面图应用程序，它使用由 Adobe Illustrator CC、HTML、CSS 和 AngularJS 生成的 SVG 平面图绘图。

我们的想法是制定包含静态隔间/办公室编号的平面图，并将该平面图与包含定期更新的人员数据的 CSV 文件结合起来，并在我们的内部网上提供信息。

虽然我是 AngularJS/SVG 的新手，但我一直关注 example 获取美国地图，并且到目前为止取得了一些不错的进展，但是现在我需要映射 CSV 数据（人员）到 SVG（隔间），但不知道如何进行。

从上面链接中的示例中，作者似乎使用 Angular.$compile 将“sg-click”指令注入到 SVG DOM 中，该指令在单击时触发 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 上的外环（Cubicle ID）
CSV（人员/隔间 ID）数据的内循环
如果 Cubicle ID 与人员 ID 匹配，则将 CSV 数据注入该 SVG 节点。

由于标签和外部文件限制，我在此处包含功能代码时遇到了一些困难，因此我创建了一个Plunk，您可以在其中查看上下文中的所有内容以及在当前状态下运行的外部文件。

谢谢。

【问题讨论】：

标签： angularjs csv svg

【解决方案1】：

与同事交谈后，他建议我：

将 CSV 列表转换为数组。
将数组加载到某种容器中。
当用户点击隔间时。
遍历数组并根据隔间 ID 查看是否存在匹配项。

自从我第一次尝试 Angular 以来，我的实现很可能不正确，但我创建了一个新的 plunk 来反映最新的代码更改。

...code in plunker.

谢谢。

Plunk

【讨论】：