AngularJS SVG图表：为ng-repeat添加范围避免闭合连线问题

嘿，这个问题我在做AngularJS SVG图表时碰到好多次了，本质就是咱们循环生成连线的时候，最后一个点的$index+1指向了数组的第一个元素，所以才会出现那条横穿图表的错误连线。下面给你两种简单有效的解决办法：

方法1：使用limitTo过滤器限制循环范围 #

直接让ng-repeat只遍历到数组的倒数第二个元素，这样就不会处理最后一个点，自然也就不会生成那条错误的连线。代码示例如下：

<svg>
  <!-- 数据点的circle元素保持不变 -->
  <circle ng-repeat="point in points" 
          cx="{{point.xValue}}" cy="{{point.yValue}}" 
          r="4" fill="#333" />
  
  <!-- 用limitTo限制循环次数为数组长度减1 -->
  <line ng-repeat="point in points | limitTo: points.length - 1" 
        x1="{{point.xValue}}" y1="{{point.yValue}}" 
        x2="{{points[$index+1].xValue}}" y2="{{points[$index+1].yValue}}" 
        stroke="#333" stroke-width="2" />
</svg>

limitTo: points.length - 1会让循环只执行到数组的倒数第二个元素，这样每一条连线都是从当前点连到下一个点，不会出现最后一个点连回第一个点的情况。

方法2：用ng-if过滤最后一个点的连线 #

另一种思路是让ng-repeat遍历所有点，但只渲染那些不是最后一个点的连线。通过判断$index是否小于数组长度减一，来决定是否生成这条线：

<svg>
  <circle ng-repeat="point in points" 
          cx="{{point.xValue}}" cy="{{point.yValue}}" 
          r="4" fill="#333" />
  
  <!-- 只在不是最后一个点的时候渲染连线 -->
  <line ng-repeat="point in points" 
        ng-if="$index < points.length - 1"
        x1="{{point.xValue}}" y1="{{point.yValue}}" 
        x2="{{points[$index+1].xValue}}" y2="{{points[$index+1].yValue}}" 
        stroke="#333" stroke-width="2" />
</svg>

这种方法的好处是，如果你之后需要对每个点做其他处理，循环还是会遍历所有点，只是跳过了最后一条错误的连线。

两种方法都能完美解决你遇到的问题，选哪种看你具体的场景需求就行～

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