javascript - डी 3 अक्ष लेबलिंग




3 Answers

नए D3js संस्करण (संस्करण 3 के बाद) में, जब आप d3.svg.axis() फ़ंक्शन के माध्यम से चार्ट अक्ष बनाते हैं तो आपके पास tickValues और tickFormat नामक दो विधियों तक पहुंच tickFormat जो फ़ंक्शन के अंदर अंतर्निहित होते हैं ताकि आप निर्दिष्ट कर सकें कि आप कौन सी निर्दिष्ट कर सकते हैं मूल्यों के लिए आपको टेक्स्ट की आवश्यकता होती है और आप किस प्रारूप में टेक्स्ट दिखाना चाहते हैं:

var formatAxis = d3.format("  0");
var axis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatAxis)
        .ticks(3)
        .tickValues([100, 200, 300]) //specify an array here for values
        .orient("bottom");
javascript d3.js axis-labels

मैं डी 3 में अक्षों में पाठ लेबल कैसे जोड़ूं?

उदाहरण के लिए, मेरे पास एक्स और वाई अक्ष के साथ एक साधारण रेखा ग्राफ है।

मेरे एक्स-अक्ष पर, मेरे पास 1 से 10 तक की टिकटें हैं। मैं चाहता हूं कि शब्द "दिन" इसके नीचे दिखाई दें ताकि लोग जान सकें कि एक्स अक्ष दिन की गिनती कर रही है।

इसी तरह, वाई-अक्ष पर, मेरे पास संख्याएं 1-10 के रूप में होती हैं, और मैं किनारे दिखाई देने के लिए "सैंडविच खाया" शब्द चाहता हूं।

क्या ऐसा करने के लिए एक सरल तरीका है?




डी 3 घटकों का एक बहुत कम स्तर का सेट प्रदान करता है जिसे आप चार्ट इकट्ठा करने के लिए उपयोग कर सकते हैं। आपको बिल्डिंग ब्लॉक, एक अक्ष घटक, डेटा शामिल, चयन और एसवीजी दिया जाता है। एक चार्ट बनाने के लिए उन्हें एक साथ रखना आपका काम है!

यदि आप एक पारंपरिक चार्ट चाहते हैं, यानी धुरी, धुरी लेबल, एक चार्ट शीर्षक और एक साजिश क्षेत्र की एक जोड़ी, तो d3fc पर नज़र डालें क्यों ? यह अधिक उच्च स्तरीय डी 3 घटकों का एक खुला स्रोत सेट है। इसमें एक कार्टेशियन चार्ट घटक शामिल है जो आपको चाहिए:

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xLabel('Value')
  .yLabel('Sine / Cosine')
  .chartLabel('Sine and Cosine')
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

// render
d3.select('#sine')
  .datum(data)
  .call(chart);

आप यहां एक और पूरा उदाहरण देख सकते हैं: https://d3fc.io/examples/simple/index.html




chart.xAxis.axisLabel('Label here');

या

xAxis: {
   axisLabel: 'Label here'
},



Related