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使用工具提示移動平均折線圖（自定義插值）

回答

相關問題