c3js：自定義區域工具提示，懸停效果等

我一直在用c3js創建一個度量模塊（使用時間序列）。我現在試圖通過我的指標數據繪製事件，這些數據是date-span（startDate到endDate）。使用c3js的地區似乎是一個不錯的選擇，只需要一點修補就可以使它們變短並且出現在我所有繪製的數據之上。c3js：自定義區域工具提示，懸停效果等

問題是，名爲g.c3-regions的實際SVG組自動顯示在圖形數據後面。有意義的是，沒有任何真正需要允許任何用戶與區域的交互。我需要它在最前沿，所以我可以將hover和click函數綁定到每個事件。

我試着用jQuery做這件事：$('.c3-regions').insertAfter('.c3-chart')，它只是把它放在前面。工作正常 - 也就是說，直到我的c3js實例重新呈現。然後它吐出一個錯誤，它有困難重新渲染的區域（因爲他們明顯移動）

我也試過克隆它，把它放在前面，但它似乎並沒有複製SVG信息。

任何幫助將被真正讚賞，可以根據要求提供任何代碼示例。

乾杯 - - 安德魯

來源

2015-08-28 Andrew Appleby

製作你不想與pointer-events =「none」交互的東西。 –

@RobertLongson - 我已經擴展你的評論作爲答案。希望沒關係（已經標記爲社區wiki）。乾杯! – potatopeelings

當然，如果你只是把它作爲你的答案，我不會介意。它比我說得多。 –

要擴大羅伯特Longson的評論，您要添加的是

.c3-event-rect { 
    pointer-events: none; 
} 

.c3-chart { 
    pointer-events: none; 
}

這將使點擊要經過的區域層。

來源

2015-09-04 14:03:52 potatopeelings

感謝@potatopeelings＆@robertlongson，但不幸的是，我禁用了所有的圖表事件，但我需要堅持。我發現唯一能做到這一點的方法是使圖表和區域交互，只是稍微修改c3js核心以稍微移動'$$。initRegion（）;'，以便在進程中渲染出來最前沿。然後我把所有的東西都移到了我的常規圖表數據之上，所以它沒有衝突。也許這可能是一個整潔的小拉請求，如果我建立選項到'.generate' API？ –

c3js：自定義區域工具提示，懸停效果等

回答

相關問題