Question

我试图将工具提示添加到我的d3 js折线图中。大多数解决方案似乎都是基于计算圆圈以方便工具提示弹出窗口。但那是不幸的，不适合我。我的折线图有自定义插值（基于移动平均函数），当我使用我的数据绘制圆圈时，它们最终遍布整个图表（这是预期的;线是平均值，而不是值本身）。

有人有任何指针吗？圆圈（散点图方式）完全可以，但必须使用与线条相同的移动平均线进行计算。我正在考虑某种函数，它给出了移动平均函数的坐标，然后执行＆＃34; normal＆＃34; circley-东西？但这意味着我已经拥有了一个重复的功能......

更新3 - 这不起作用，因为我显然只得到了价值，我想我现在已经得到了

    // 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}; 
    });
};

上面的代码将给出第一个/最后一个观察值，但这些值不是移动平均值。所以，几乎就在那里。

Answer 1

如果您知道图形的位置和显示的当前帧中的y轴索引，您可以将这些值与鼠标悬停事件中的鼠标x和y坐标相关联，并计算该行应该具有的值。点。它不太准确，但它为我做了工作。

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

d3.js带有刀尖的移动平均线图（自定义插补）

1 个答案: