使用AngularJS构建SVG图表时出现计算错误的技术问询

我太懂这种“功能能用但报错满天飞”的糟心感了！咱们先搞清楚问题根源，再一步步解决：

错误原因 #

你现在在SVG的cx、cy属性里用了插值表达式{{}}，AngularJS在初始渲染的时候，会先把这些插值字符串直接塞给SVG元素的属性——浏览器根本认不出{{500 / maxX * point.xValue}}这种值，自然就会抛出无效属性的错误。虽然之后Angular会把这些值替换成正确的数值，让图表能正常显示，但初始的错误已经产生了。

解决方案 #

这里有两种靠谱的解决方式，你可以根据自己的场景选：

1. 使用AngularJS官方的ng-attr-*指令（最推荐）

这是Angular专门为SVG这类元素设计的属性绑定方式，它会等表达式计算完成后再设置对应的属性，从根源上避免初始无效值的问题：

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

只需要把原来的cx改成ng-attr-cx，cy改成ng-attr-cy就行，其他逻辑完全不变。

2. 提前在控制器中计算属性值

如果你的数据不是动态变化的，或者可以提前处理，也可以在控制器里把每个点的cx、cy值计算好，直接绑定到模板里：

// 在你的Angular控制器中
$scope.points.forEach(function(point, index) {
  // 对应limitTo: points.length-1的逻辑，只处理前n-1个点
  if (index < $scope.points.length - 1) {
    // 确保maxX和maxY不为0，避免除以0错误
    const safeMaxX = $scope.maxX || 1;
    const safeMaxY = $scope.maxY || 1;
    point.cx = 500 / safeMaxX * point.xValue;
    point.cy = point.insulin / safeMaxY * 400;
  }
});

然后模板里就可以直接用计算好的值，不用再写复杂表达式：

<circle 
  ng-repeat="point in points | limitTo : points.length-1" 
  cx="{{point.cx}}" 
  cy="{{point.cy}}" 
  r="3" 
  fill="red"
/>

额外注意点 #

别忘了检查maxX和maxY的值，如果它们是0或者undefined，计算的时候会得到NaN，也会引发错误——上面的控制器代码里已经加了安全处理，你可以参考一下。

内容的提问来源于stack exchange，提问作者mBo