nvd3.js- व्यू फाइंडर के साथ लाइन चार्ट: अक्ष लेबल को घुमाएं और

Question

पर माउस मानते समय मैं इस तरह के मंच के लिए नया हूं और मेरे अंग्रेजी कौशल सबसे अच्छे नहीं हैं लेकिन मैं अपना सर्वश्रेष्ठ प्रयास करने की कोशिश करूंगा:)।

nvd3 website पर व्यू फाइंडर के साथ लाइन चार्ट का एक उदाहरण है। यह एक है (उदाहरण \ lineWithFocusChart.html, nvd3 ज़िप पैकेज) जिसे मैं पिछले 2 दिनों के दौरान काम कर रहा हूं। मैंने उदाहरण के प्रारूप में केवल एक ही बदलाव किया है: मैं सामान्य संख्या के बजाय एक्स अक्ष में तिथियों का उपयोग करता हूं।

यहाँ मेरी 2 प्रश्न हैं:

1- मैं कैसे एक्स अक्ष में सभी टिक 'लेबल बारी बारी से कर सकते हैं? मेरी तिथियां बहुत लंबी हैं (% x% X, दिन और समय) और मैं उन्हें उनके देखने में सुधार करने के लिए आगे बढ़ना चाहता हूं। मैं केवल 2 टिक घूर्णन कर सकता हूं (एक्स अक्ष के अधिकतम और न्यूनतम, किनारों)। इस कोड को मैं अंदर संशोधित है "स्विच (axis.orient())" nv.d3.js पर ब्लॉक:

case 'bottom': 
     axisLabel.enter().append('text').attr('class', 'axislabel') 
      .attr('text-anchor', 'middle') 
      .attr('y', 25); 
     axisLabel 
      .attr('x', scale.range()[1]/2); 
     if (showMaxMin) { 
     var axisMaxMin = wrap.selectAll('g.axisMaxMin') 
         .data(scale.domain()); 
     axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text'); 
     axisMaxMin.exit().remove(); 
     axisMaxMin 
      .attr('transform', function(d,i) { 
       return 'translate(' + scale(d) + ',0)' 
      }) 
      .select('text') 

      .attr('dy', '.71em') 
      .attr('y', axis.tickPadding()) 
      .attr('text-anchor', 'middle') 
      .text(function(d,i) { 
       return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d) 
      }) 
      .attr('transform', 'rotate(45)') 
      ; 
     d3.transition(axisMaxMin) 
      .attr('transform', function(d,i) { 
       return 'translate(' + scale.range()[i] + ',0)' 
      }); 
     } 
     break; 

आप जाँच कर सकते हैं के रूप में मैं .attr रखा है ('को बदलने', 'बारी बारी से (45) ') नई विशेषता के रूप में अधिकतम और न्यूनतम टिक घुमाए गए हैं (axisMaxMin)। मैंने इस तरह से कोशिश की है (पूरे nv.d3.js फ़ाइल में) अन्य टेक्स्ट तत्वों के साथ जो मुझे लगता है कि एक्स टिक के साथ जुड़े हुए हैं लेकिन यह काम नहीं करता है। कोई उपाय? सभी एक्स लेबल घुमाने के लिए मुझे कहां परिवर्तन करना है?

2- उदाहरण में, जब आप लाइन पर माउस डालते हैं, तो बिंदु से जुड़े मान (x, y) को दिखाने के लिए कोई ईवेंट ट्रिगर नहीं होता है। मैं उन मूल्यों को कैसे दिखा सकता हूं? मैंने अन्य उदाहरणों में उपयोग की जाने वाली विधियों को कॉपी-पेस्ट करने का प्रयास किया है जहां ये मान दिखाए जाते हैं लेकिन यह काम नहीं करता है। कोई उपाय? डी:

अपना समय और ज्ञान को साझा करने के लिए धन्यवाद।

Answer 1

एनवीडी 3 के लिए हालिया अपडेट था जो एक्स-अक्ष टिक लेबल को वास्तव में आसान बनाता है। अब अक्ष मॉडल का एक फ़ंक्शन है जिसे rotateLabels (डिग्री) कहा जाता है जो एक पूर्णांक लेता है और आपके xTick लेबल को निर्दिष्ट संख्या में डिग्री घुमाएगा। सभी xTick 45 डिग्री वापस लेबल घुमाने के लिए, अगर आप इस तरह इसका इस्तेमाल कर सकते हैं:

var chart = nv.models.lineChart(); 
chart.xAxis.rotateLabels(-45);