Question

现在，我正在尝试在d3.js图中实现搜索栏功能。现在它什么也没做，但这不是当前的问题。问题是，当我在栏中键入/删除某些内容时，出现/消失的字符会出现明显的滞后/起伏。我认为问题出在我的情节上。我在屏幕上有140多个点，它们的位置正在插值。因此，从转换的开始到结束，我的代码必须计算140个位置数千次。

我已经研究过尝试减少d3.interpolateNumber函数的基数，但是似乎没有第三个参数可以像linspace命令中那样更改术语数量。现在，我有一个由1000个数字组成的数组供我的函数运行，但是我不知道如何将数组传递给其他函数。

以下是此问题的相关功能。 tweenPatch中带注释的行是使代码运行但具有绘图计算问题的原始代码。变量arr，curr和step是我试图解决的情况，但是我一直无法弄清楚如何将数组传递给displayPatch（）。

function tweenPatch() {
        var patch = d3.interpolateNumber(1, 26);
        var arr = [];
        var curr = 1;
        var step = (26 - 1) / (1000 - 1);
        for (var i = 0; i < 1000; i++) {
            arr.push(curr + (step * i));
        }

        return arr.forEach(function(d) {
            console.log(arr[d]);
            displayPatch(arr[d]);
        });
        //return function(t) { displayPatch(t); };
    }
    function displayPatch(patch) {
        dots.data(interpolateData(patch), function(d) { return d.name; }).call(position).sort(order);
        var inter = Math.floor(patch);
        var seas = 8;
        var patc = 1;
        if (inter > 24) {
            seas = 9;
            patc = inter - 24;
        } else {
            patc = inter;
        }
        label.text("Patch " + seas + "." + patc);
    }

    function interpolateValues(values, number) {
        old = Math.floor(number);
        upd = Math.ceil(number);

        var old_data = values.filter(function(d) {return d.internal == old;});
        var new_data = values.filter(function(d) {return d.internal == upd;});

        var oobj = old_data[0];
        var nobj = new_data[0];

        var onum = oobj[Object.keys(oobj)[4]];
        var nnum = nobj[Object.keys(nobj)[4]];

        var difint = number - old;
        var difdis = 0;
        var newnum = nnum;

        if (nnum > onum) {  
            difdis = nnum - onum;
            newnum = ((difint) * difdis) + onum;
        } else if (onum > nnum) {
            difdis = onum - nnum;
            newnum = onum - ((difint) * difdis);
        }

        return newnum;

    }

我相信将SVG切换到画布可能会有所帮助，但是由于我不了解画布，所以我宁愿把它作为最后的选择。

如何减少d3.js转换期间的计算量？

0 个答案: