构建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 ...”。

这不是这样做的方法吗？我应该以不同的方式进行计算吗？我不知道如何计算积分。

codepen 链接： https://codepen.io/mbezema/pen/bvWPVm

Answer 1

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

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

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

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

cx="15"

浏览器满意，并正确渲染圆圈。

如果您真的想避免这些消息，一个可能的解决方案是从 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 中删除了过滤器。