空值的svg跳过索引

Question

我正在根据以下数据类型构建一个图表: points =胰岛素:20，cho:30；我使用ng-重复循环遍历我的数组。我用指数作为x值，用胰岛素或cho作为y值。我希望索引为x值，因为稍后我将使用日期作为x值，如果日期发生在该日期，则希望显示cho/胰岛素值。值绑定到索引，因为它们需要在该时间段显示在svg中。

<line class="insulinLine" ng-repeat="point in points | limitTo : 
points.length-1"
ng-x1="{{((width /points.length) * $index ) + (width/points.length)}}" 
ng-y1="{{((point.insulin / maxY) * 400)}}" 
ng-x2="{{((width / points.length) * ($index + 1)) + (width/points.length)}}" 
ng-y2="{{((points[$index + 1].insulin / maxY) * 400)}}"/>

我的问题发生在空值上，如果有一个空值，我希望ng-重复跳过y2的索引直到下一个非空值，以便该行连接到下一个实际值。

我尝试过的选择是：

1. 什么也不做，这会将y值设置为图的底部。
2. 如果不显示空值，就不会生成行。 if="point.insulin!=null“
3. 使用三值运算符，就会搞乱整个图，这是合乎逻辑的，因为它只在每个点上进行计算，而不会在全局移动索引。 点$index+1胰岛素!==空？((点$index+1胰岛素/ maxY) * 400)：((点$index+2胰岛素/ maxY) * 400)
4. 您可以在每个独立点上放置x1、x2、y1、y2值，使用javascript中的一个函数来确定每一行的值，但是应该有更简单的方法吗？

您是否可以设置一个条件，在其中查找下一个非空值，然后使用该值并跳过该值的索引？

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

Answer 1

计算javascript中的点数并构造一个新的数组就能做到这一点。然后循环遍历insulinLines和choLines数组来设置最后的行。代码链接：https://codepen.io/mbezema/pen/bvWPVm

function determineLines() {
        var insulinStack = [];
        var choStack = [];
        for (var i = 0; i < $scope.points.length; i++) {
            if($scope.points[i].insulin !== null){
                console.log(i);
                insulinStack.push({
                    xValue: i,
                    insulin: $scope.points[i].insulin
                });
            }
            if($scope.points[i].cho !== null){
                choStack.push({
                    xValue: i,
                    cho: $scope.points[i].cho
                });
            }
        }
        $scope.insulinLines = [];
        $scope.choLines = [];
        while (insulinStack.length){
            $scope.insulinLines.push(insulinStack.pop());
        }
        while (choStack.length){
            $scope.choLines.push(choStack.pop());
        }
    }

Answer 2

我会在控制器中做这个逻辑。有一个setPoints方法，每次您想更新点数组时，只需遍历该方法即可。类似于：

function ignoreNulls (array) {
    let lastValue = null;
    for (let i = array.length; i >= 0; i--) {
        if (!array[i]) {
            array[i] = lastValue;
        }
        else {
            lastValue = array[i];
        }
    }
}

我在这里要做的是在数组中倒退，检查是否有一个值。如果有-缓存它。如果没有最后一个缓存值，则改为。