2014-07-09 5 views
9

मैं डीसीजे के लिए आउट ऑफ़ द बॉक्स टूलटिप्स को संशोधित करना चाहता हूं, और ऐसा लगता है कि d3.js tooltips का उपयोग करके this question में एक समाधान है। हालांकि, मैं इस बारे में उलझन में हूं कि इसे कैसे कार्यान्वित किया जाए ताकि टूलटिप को सभी लिंक किए गए ग्राफों के लिए dc.js डैशबोर्ड में संशोधित किया जा सके। गिटहब रेपो में उदाहरण व्यक्तिगत ग्राफ के लिए खुद को अच्छी तरह से उधार देते हैं, लेकिन मैं वर्तमान में छह लिंक किए गए ग्राफ के साथ काम कर रहा हूं और सभी ग्राफों पर टूलटिप्स को संशोधित करने की आवश्यकता है। किसी भी सहायता की सराहना की जाएगी।डी 3-टूलटिप्स एकाधिक लिंक किए गए डीसीजेजे चार्ट्स के लिए

+2

क्या आपने [renderlet] (https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#renderletrenderletfunction) में युक्तियां जोड़ने का प्रयास किया है? आमतौर पर डी 3 जेनरेटेड सामग्री को पोस्ट-प्रोसेस करने के लिए यह सबसे अच्छी जगह है। ऐसा करने के लिए आपके पास प्रति चार्ट एक रेंडरलेट हो सकता है। – Gordon

+0

अब रेंडरलेट कार्यक्षमता में देख रहे हैं। ऐसे तीन तरीके हैं जो ऐसा लगता है कि वे सभी उदाहरणों में होते हैं: '.call() ',' .on (' mouseover ')', और '.on ('माउसआउट') 'और मुझे पूरा यकीन नहीं है कि कैसे इन्हें रेंडरलेट फ़ंक्शन पर फ़ीड करें (या यदि मुझे आवश्यकता है)। – kylerthecreator

उत्तर

17

यहाँ dc.js साथ d3.tip का उपयोग करने का एक अच्छा उदाहरण है:

http://saraquigley.github.io/uc-trends/

http://saraquigley.github.io/uc-trends/javascript/expenses_all.js

बातें मैं करना होगा अलग ढंग से कर रहे हैं

  1. selectAlls है कि शीर्ष-स्तर के बजाय chart.renderlet(function(chart) { ... }) में युक्तियां (उसके कोड के अंत में) लागू करें, ताकि वे चार्ट में परिवर्तनों पर प्रतिक्रिया दें।
  2. स्पष्टता के लिए d3.selectAll के बजाय chart.selectAll का उपयोग करें और यह सुनिश्चित करने के लिए कि आप केवल पृष्ठ के बजाय विशेष चार्ट में तत्वों का चयन कर रहे हैं।

वेब/उदाहरण या अक्सर पूछे जाने वाले प्रश्नों के लिए एक उदाहरण तैयार करने की उम्मीद है लेकिन अब एचटीएच।

+0

उदाहरण में, यह पंक्ति चार्ट के लिए "g.row" का उपयोग करता है। लाइन चार्ट के लिए क्या उपयोग किया जाना चाहिए कोई विचार? धन्यवाद। – Wilson

+3

स्रोत का प्रयोग करें, ल्यूक! https://github.com/dc-js/dc.js/blob/master/src/line-chart.js#L172 – Gordon

+0

धन्यवाद। पाया कि मुझे d3.selectAll ('। Dot') का उपयोग करना चाहिए। कॉल (टिप); – Wilson

संबंधित मुद्दे