在Dimple.js中添加工具提示行

我已經使用Dimple的折線圖作爲基礎創建了簡化的網絡樣式圖表。例如：http://jsfiddle.net/cc1gpt2o/在Dimple.js中添加工具提示行

myChart.addCategoryAxis("x", "Entity"); 
    myChart.addCategoryAxis("y", "Entity").addOrderRule("Keyword"); 
    var z = myChart.addMeasureAxis("z", "Size"); 
    z.overrideMin = 0; 
    z.overrideMax = 200; 
    myChart.addSeries("Keyword", dimple.plot.line); 
    myChart.addSeries("Keyword", dimple.plot.bubble); 
    myChart.draw();

然而，折線圖的提示懸停在點的時候纔會顯示。由於有許多重疊點，用戶很難識別線條和值。如果用戶在懸停在點之間的線上時可以看到工具提示，那將是最好的。

我發現平分顯示有關點信息就行了D3的方法，但它似乎太複雜適用於我一起工作的設置： - http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html

之前，我涉水過遠成解決方案，有沒有更簡單的方法在Dimple做到這一點？（ - 例如，將圓圈的工具提示功能應用到路徑上？）

來源

2014-10-28 williamtx

不幸的是，series.addEventHandler('mouseover', handler)只有當你超過行的點時纔會觸發，所以沒有默認功能更好。要瞄準線本身，你將不得不使用普通D3：

chart.series[0].shapes.on('mouseover', function(e){ 
    //handle 
    // `e` is data from line 
    // d3.event has mouse position data 
});

您可以獲取有關該事件的對象行本身（綁在該行的數據）的信息。不幸的是，它與dimple.eventArgs對象的數據不同，因此您將無法使用dimple._showPointTooltip或其他工具提示方法（我認爲這不會起作用）。

在處理程序函數中，您還可以從d3.event獲取有關x和y鼠標位置的信息。結合來自這兩個對象的信息應該讓您在當前鼠標位置定位一個自定義工具提示，並且可以將其設置爲標準凹坑工具提示。

我不確定的是如何獲得鼠標所在的原始對應值。我相信它應該是這樣的：

chart.series[0].y._scale.invert(d3.event.y);

但在我有限的測試中，我無法讓它正常工作。也許這在任何情況下都會是一個有益的開始。

來源

2014-10-28 18:11:38 ne8il

在Dimple.js中添加工具提示行

回答

相關問題