D3：畫在數組對象多線圖互動懸停線

我試圖與懸停線D3圖，將數據從服務器上獲取，這就好比：D3：畫在數組對象多線圖互動懸停線

data = [ 
    { 
     key: 'series_1', 
     values: [ 
     { 
      time: 1420257136216, 
      value: 123 
     }, 
     ... ... 
     ] 
    }, 
    ... ... 
]

這裏是一個快速瀏覽我的代碼：Fiddle

問題：

我不能夠得到從D3平分功能x值（時間）的正確的y值的基礎上，從平分線功能的指數回報是不是我前面面觀。

我已經做了谷歌，其下面的這個例子d3.js Multi-series line chart interactive一些搜索，用於平分線的數據是這樣的：

data = [ 
      { 
      series_1: '123', 
      series_2: '234', 
      time: '1420257136216' 
      }, 
      .... 
     ]

我是否需要限制像上面的格式我的數據（也對數據進行排序）在我能從d3平分函數中獲得正確的返回索引之前？或者我可以實現它的任何其他方式？

非常感謝

來源

2015-01-03 Neaped

類似[this]（http://phil-pedruco.github.io/examples/coffeeHouse/）？ – user1614080

@ user1614080 yeap。你提供的例子是使用nvd3。我知道許多js庫可以解決我的問題，但我只想知道如何實現它。（因爲我現在正在挖掘其他代碼：P） – Neaped

最上面的圖表是香草d3，第二個圖表是nvd3。最上面的圖表使用'd3.bisector。 – user1614080

您的平分函數對於您的數據是錯誤的。您有：

var bisectDate = d3.bisector(function(d) { return d.date; }).left;

但你的財產是time：

var bisectDate = d3.bisector(function(d) { return d.time; }).left;

你會然後調用它（對拳系列）爲：

bisectDate(data[0].values, someTimeStamp);

如果您的序列數據不按時間排序然後做：

var arr = data[0].values; 
arr.sort(function(a, b) { return a.time - b.time; }); 
bisectDate(arr, someTimeStamp);

更新fiddle。

來源

2015-01-03 16:00:27 Mark

非常感謝。順便說一下，平分線函數中的錯誤定義只是一個'錯誤'。當我嘗試之前使用平分線時，我沒有使用新的Date（timeStamp）來獲得平分線索引的正確時間。現在我明白了！ – Neaped

D3：畫在數組對象多線圖互動懸停線

回答

相關問題