d3.js移动平均线图(自定义插值）与工具提示

d3.js moving average line chart (custom interpolation) with tool-tip

本文关键字：插值 自定义 工具提示 移动 js d3      更新时间：2023-09-26

我正在尝试将工具提示添加到我的d3-js折线图中。大多数解决方案似乎都是基于计算圆来简化工具提示弹出窗口。但不幸的是，这对我来说不起作用。我的折线图有自定义插值（基于移动平均值函数），当我使用数据绘制圆时，它们最终会遍布图表（这是意料之中的；线是平均值，而不是值本身）。

有人有什么建议吗？圆形（散点图方式）是完全可以的，但它们必须使用与直线相同的移动平均值进行计算。我在想某种函数，它给出了移动平均函数的坐标，然后做"正常"的循环？但这意味着我已经有了一个重复的函数。。。

Update3-这不起作用，因为我显然仍然只得到值，我想我现在已经得到了

    // Add event listeners/handlers
svg.on('mouseover', function() {
  marker.style('display', 'inherit');
}).on('mouseout', function() {
  marker.style('display', 'none');
}).on('mousemove', function() {
   var mouse = d3.mouse(this);
   marker.attr('cx', mouse[0]);
  var datumVar = x.invert(mouse[0]),
    index = bisect(dataFilter, datumVar),
    startDatum = dataFilter[index - 1],
    endDatum = dataFilter[index],
    interpolate = d3.interpolateNumber(startDatum.Kvot, endDatum.Kvot),
    range = endDatum.datum - startDatum.datum,
    valueY = interpolate((datumVar % range) / range);
    console.log((valueY));
    marker.attr('cy', y(valueY));
});

创建包含我的值的ma的对象的最终代码：

var movingWindowAvg = function (arr, step) {  // Window size = step
    return arr.map(function (_, idx) { 
        var wnd = arr.slice(idx, idx + step);
        var result = d3.sum(wnd.map(function(d) { return d.Kvot; })) / wnd.length; if (isNaN(result)) { result = _; }
        var tmpDate = wnd[0].datum;
        return {Kvot: result, datum: tmpDate}; 
    });
};

上面的代码将给出第一次/最后一次观测的值，但这些值不是n移动平均值。所以，差不多到了。

如果您知道图形的位置和显示的当前帧中的y轴索引，则可以将这些值与mouseover事件中的鼠标x和y坐标相关联，并计算该行在该给定点"应该"具有的值。它不太准确，但它为我完成了任务。

这是对该技术的回应，如果你想看到一些代码，我可以稍后在家里提供给你。

相关文章：