javascript - 构建svg图时angularjs计算错误

Question

其他解决方案:Use svg with angularjs ng-repeat

我正在使用 angularjs 构建图表，一切正常，但我收到大量无法真正解决的错误消息。我有一个包含数据点和属性的数组。在 html 代码中，我调用了如下所需的属性:

 <circle ng-repeat="point in points | limitTo : points.length-1" 
    cx="{{500 / maxX * point.xValue}}" cy="{{points[$index].insulin / maxY * 400}}"
    r="3" fill="red"/>

所有消息都有点像这样，都是括号内的表达式: 错误:属性 y2:预期长度，“{{points[$index …]”。

这不是办法吗？我应该以不同的方式进行计算吗？我不知道还有什么方法可以计算分数。

代码笔链接: https://codepen.io/mbezema/pen/bvWPVm

Answer 1

你得到的只是一个警告，不是一个错误，而且它只在开发者控制台可见，所以从用户的 Angular 来看，没有什么严重的事情发生；图表得到正确呈现。

您遇到的是 AngularJS 的一个限制，该限制已在较新的 Angular 版本中得到解决:在数据绑定(bind)发生之前，浏览器会很快读取 AngularJS 命令字符串，即。即.

cx="{{500 / maxX * point.xValue}}"

并提示这个字符串不是数字。因为紧接着 AngularJS 交换了它

cx="15"

浏览器满意，并正确呈现圆。

如果您真的想避免这些消息，一个可能的解决方案是从具有数据绑定(bind)的 SVG 命名空间中删除属性，只从 Javascript 编写它们。您可以定义两个简单的指令:

app.directive('graphPoint', function () {
  return {
    link: function (scope, element) {
      element.attr('cx', 500 / scope.maxX * scope.point.xValue)
      element.attr('cy', scope.point.insulin / scope.maxY * 400)
    },
    scope: true
  }
});

app.directive('graphLine', function () {
  return {
    link: function (scope, element) {
      element.attr('x1', 500 / scope.maxX * scope.point.xValue)
      element.attr('y1', scope.point.insulin / scope.maxY * 400)
      element.attr('x2', 500 / scope.maxX * scope.points[scope.$index + 1].xValue)
      element.attr('y2', scope.points[scope.$index + 1].insulin / scope.maxY * 400)
    },
    scope: true
  }
});

然后写下你的<svg>作为

<svg height="400" width="500">
  <line graph-line ng-repeat="point in points | limitTo : points.length-1" />
  <circle graph-point ng-repeat="point in points" r="3" fill="red" />
</svg>

注意:我假设您不小心遗漏了最后一个数据点并从圆圈中删除了过滤器 ng-repeat .