d3 অক্ষ লেবেলিং

Question

আমি কীভাবে d3-তে অক্ষরে টেক্সট লেবেল যুক্ত করব?

উদাহরণস্বরূপ, আমার কাছে একটি এক্স এবং y অক্ষ সহ একটি সাধারণ লাইন গ্রাফ রয়েছে।

আমার এক্স-অক্ষে, আমি 1 থেকে 10 পর্যন্ত টিক্স পেয়েছি want আমি চাইছি "দিনগুলি" শব্দটির নীচে উপস্থিত হওয়া যাতে লোকেরা জানতে পারে যে এক্স অক্ষগুলি দিন গণনা করছে।

একইভাবে, 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

নতুন D3js সংস্করণ (সংস্করণ 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

সুন্দর ব্যাখ্যা, তবে মনে হচ্ছে ওপিতে ইতিমধ্যে তাদের অক্ষগুলিতে টিক্স আছে।

— মাইকেল শ্যাপার

ওপি? দুঃখিত, আমি সংক্ষিপ্ততা পাই না।

— আম্বোদি

কোন চিন্তা করো না. ওপি = 'আসল পোস্ট' বা 'আসল পোস্টার'। (সার্চ ইঞ্জিন এবং

— urband অভিধান

Answer 3

আপনি যদি আমার মতো y- অক্ষের মাঝখানে y- অক্ষের লেবেলটি চান:

1. পাঠ্য-অ্যাঙ্কর মধ্যম সহ পাঠ্যকে 90 ডিগ্রি ঘোরান
2. পাঠটিকে এর মাঝপয়েন্ট অনুসারে অনুবাদ করুন
   • এক্স অবস্থান: 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 এ কাজ করেন, যেমন প্রস্তাবিত হয়েছে, আপনি আপনার প্রয়োজন মতো সমস্ত কিছু সরবরাহ করে এই উদাহরণটি ব্যবহার করতে পারেন।

আপনি কেবল আপনার "দিন" দ্বারা এক্স-অক্ষের ডেটা প্রতিস্থাপন করতে চাইতে পারেন তবে স্ট্রিংয়ের মানগুলি সঠিকভাবে পার্স করা এবং কনটেনেট প্রয়োগ না করার কথা মনে রাখতে পারেন।

পার্সটাইম পাশাপাশি তারিখের ফর্ম্যাট সহ দিনগুলি স্কেলিংয়ের কৌশলটিও করতে পারে?

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 উপাদানগুলির একটি খুব নিম্ন স্তরের সেট সরবরাহ করে যা আপনি চার্টগুলি একত্র করার জন্য ব্যবহার করতে পারেন। আপনাকে বিল্ডিং ব্লক, একটি অক্ষ উপাদান, ডেটা জয়েন, নির্বাচন এবং এসভিজি দেওয়া হবে। চার্ট গঠনের জন্য তাদের একসাথে রাখা আপনার কাজ!

আপনি যদি একটি প্রচলিত চার্ট চান, যেমন অক্ষ, অক্ষের লেবেল, একটি লেখচিত্রের শিরোনাম এবং একটি প্লটের ক্ষেত্র, তবে ডি 3 এফসি কেন দেখুন না ? এটি আরও উচ্চ-স্তরের ডি 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/example/simple/index.html

Answer 6

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

বা

xAxis: {
   axisLabel: 'Label here'
},