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

Question

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

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

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

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

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

Answer 1

एक्सिस लेबल डी 3 के अक्ष घटक में बिल्ट-इन नहीं हैं , लेकिन आप एसवीजी textतत्व को जोड़कर अपने आप को लेबल जोड़ सकते हैं । इसका एक अच्छा उदाहरण गैपिन्दर के एनिमेटेड बबल चार्ट, द वेल्थ एंड हेल्थ ऑफ नेशंस का मेरा मनोरंजन है । एक्स-अक्ष लेबल इस तरह दिखता है:

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

और इस तरह y- अक्ष लेबल:

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

आप इन लेबल्स को स्टाइल करने के लिए एक स्टाइलशीट का उपयोग कर सकते हैं जैसा कि आप चाहते हैं, या तो एक साथ ( .label) या व्यक्तिगत रूप से ( .x.label, .y.label)।

Comments

मैंने पाया है कि .attr("transform", "rotate(-90)")पूरे समन्वय प्रणाली को घुमाने का कारण बनता है। इस प्रकार, यदि आप "x" और "y" के साथ पोजिशनिंग कर रहे हैं, तो आपको उन स्थितियों से स्वैप करने की आवश्यकता है जो मुझे उम्मीद थी।

— लूबर

कई चार्ट और उन सभी पर अक्ष लेबल चाहने के मामले में कोई विशेष विचार?

— ted.strauss

Answer 2

नए डी 3जेएस संस्करण (संस्करण 3 बाद में) में, जब आप d3.svg.axis()फ़ंक्शन के माध्यम से एक चार्ट अक्ष बनाते हैं, तो आपके पास दो विधियों तक पहुंच होती है जिन्हें कॉल किया जाता है tickValuesऔर 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");

Comments

अच्छी व्याख्या है, लेकिन ऐसा लगता है कि ओपी पहले से ही अपनी कुल्हाड़ियों पर टिक गया है।

— माइकल शेपर

ओ पी? मुझे इसका नाम नहीं मिला, क्षमा करें।

— अम्बोडी

कोई चिंता नहीं। ओपी = 'मूल पोस्ट' या 'मूल पोस्टर'। (खोज इंजन और urbandictionary.com इस तरह संक्षिप्त रूपों के लिए एक बहुत अच्छी संदर्भ है।)

— माइकल Scheper

Answer 3

अगर आप y- अक्ष के बीच में y- अक्ष लेबल चाहते हैं जैसे मैंने किया है:

1. टेक्स्ट-एंकर मध्य के साथ पाठ 90 डिग्री घुमाएँ
2. पाठ को इसके मध्य बिंदु से अनुवादित करें
   • x स्थिति: y- अक्ष टिक लेबल के ओवरलैप को रोकने के लिए ( -50)
   • y स्थिति: y- अक्ष के मध्य बिंदु से मेल खाने के लिए ( chartHeight / 2)

कोड नमूना:

var axisLabelX = -50;
var axisLabelY = chartHeight / 2;

chartArea
    .append('g')
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('transform', 'rotate(-90)')
    .text('Y Axis Label')
    ;

यह पूरे समन्वय प्रणाली को घूमने से रोकता है जैसा कि ऊपर लूबार ने उल्लेख किया है।

Comments

ज़रूर, मैंने कुछ और विवरण जोड़ दिए हैं, क्या यह बेहतर है?

— माइकल क्लार्क

हां! मैंने इसे पहले से ही अपटूडेट कर दिया है, क्योंकि आपके मूल उत्तर ने मुझे सही रास्ते पर ला दिया है, लेकिन जिस तरह से यह अब है, भविष्य के पाठकों को इसके साथ ज़्यादा काम करने की ज़रूरत नहीं होगी, क्योंकि इसके सभी अर्थ हैं। :-) चीयर्स।

— माइकल शेपर

Answer 4

यदि आप सुझाए गए अनुसार d3.v4 में काम करते हैं, तो आप इस उदाहरण का उपयोग अपनी जरूरत की हर चीज की पेशकश कर सकते हैं।

आप बस अपने "दिनों" द्वारा एक्स-अक्ष डेटा को बदलना चाह सकते हैं, लेकिन स्ट्रिंग मानों को सही ढंग से पार्स करना और कॉन्टेनेट को लागू न करना याद रखें।

parseTime तारीख प्रारूप के साथ स्केलिंग दिनों के लिए चाल कर सकता है?

d3.json("data.json", function(error, data) {
if (error) throw error;

data.forEach(function(d) {
  d.year = parseTime(d.year);
  d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));


g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("fill", "#5D6971")
    .text("Population)");

वैश्विक सीएसएस / जेएस के साथ बेला

Answer 5

डी 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

Answer 6

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

या

xAxis: {
   axisLabel: 'Label here'
},