d3.js使用工具提示移动平均折线图（自定义插值）

我正在尝试将工具提示添加到我的d3 js折线图。大多数解决方案似乎都是基于计算出来的工具提示弹出窗口的圆圈。但这不幸的是不适合我。我的折线图具有自定义插值（基于移动平均函数），并且当我使用我的数据绘制圆时，它们会在整个图表上显示（这是预期的;线是平均值，而不是值本身）。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)); 
});

创建包含用于我的值毫安的对象

最终代码：

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

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

来源

2014-09-05 ErrantBard

小提琴，然后我们可以做一些事情..... – 2014-09-05 12:16:43

我绝对可以做到这一点。我主要是为了一种技术来做到这一点，而不是人们应该为我写这个功能。这将需要一些时间来设置小提琴。在此期间，我认为这样做可能应该起作用：[link]（http://zoopoetics.com/blog/?p=499） – ErrantBard 2014-09-05 12:31:10

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

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

来源

2014-09-05 12:57:16 Steff

谢谢！我想我（几乎）。我得到了一个结果，但大多数时候线路都不合格。可能是因为我有两条线我猜？ – ErrantBard 2014-09-08 07:10:59

d3.js使用工具提示移动平均折线图（自定义插值）

回答

相关问题