Question

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

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

虽然我是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（Cubicle ID）上的外环
内部循环CSV（人员/小隔间ID）数据
如果Cubicle ID与Personnel ID匹配，请将CSV数据注入该SVG节点。

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

感谢。

Answer 1

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

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

由于这是我第一次尝试Angular，我的实现可能不正确，但我已经创建了一个新的插件来反映最新的代码更改。

...code in plunker.

感谢。

Plunk

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

1 个答案: