pelabelan sumbu d3


94

Bagaimana cara menambahkan label teks ke sumbu di d3?

Misalnya, saya memiliki grafik garis sederhana dengan sumbu x dan y.

Pada sumbu x saya, saya memiliki tanda centang dari 1 sampai 10. Saya ingin kata "hari" muncul di bawahnya sehingga orang tahu sumbu x menghitung hari.

Demikian pula, pada sumbu y, saya memiliki angka 1-10 sebagai tanda centang, dan saya ingin kata "sandwich yang dimakan" muncul ke samping.

Apakah ada cara sederhana untuk melakukan hal ini?

Jawaban:


164

Label sumbu tidak ada di dalam komponen sumbu D3 , tetapi Anda dapat menambahkan label sendiri hanya dengan menambahkan textelemen SVG . Contoh yang bagus dari ini adalah reka ulang bagan gelembung animasi Gapminder, The Wealth & Health of Nations . Label sumbu x terlihat seperti ini:

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)");

Dan label sumbu y seperti ini:

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)");

Anda juga dapat menggunakan lembar gaya untuk memberi gaya label ini sesuka Anda, baik bersama-sama ( .label) atau satu per satu ( .x.label, .y.label).


9
Saya telah menemukan yang .attr("transform", "rotate(-90)")menyebabkan seluruh sistem koordinat berputar. Jadi, jika Anda memposisikan dengan "x" dan "y", Anda perlu menukar posisi dari yang saya harapkan.
lubar

ada pertimbangan khusus untuk kasus beberapa grafik dan menginginkan label sumbu pada semuanya?
ted.strauss

31

Dalam versi D3js baru (versi 3 dan seterusnya), ketika Anda membuat sumbu bagan melalui d3.svg.axis()fungsi, Anda memiliki akses ke dua metode yang dipanggil tickValuesdan tickFormatyang ada di dalam fungsi sehingga Anda dapat menentukan nilai mana yang Anda perlukan centangnya dan untuk apa format yang Anda inginkan agar teksnya muncul:

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");

Penjelasan yang bagus, tetapi tampaknya OP sudah memiliki kutu di kapak mereka.
Michael Scheper

1
OP? Saya tidak mengerti singkatannya, maaf.
ambodi

Jangan khawatir. OP = 'Posting Asli' atau 'Poster Asli'. (Mesin pencari dan urbandictionary.com adalah referensi yang cukup bagus untuk singkatan seperti ini.)
Michael Scheper

13

Jika Anda menginginkan label sumbu y di tengah sumbu y seperti yang saya lakukan:

  1. Putar teks 90 derajat dengan tengah jangkar teks
  2. Terjemahkan teks pada titik tengahnya
    • posisi x: untuk mencegah tumpang tindih label centang sumbu y (-50 )
    • posisi y: untuk mencocokkan titik tengah sumbu y ( chartHeight / 2)

Contoh kode:

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')
    ;

Ini mencegah perputaran seluruh sistem koordinat seperti yang disebutkan oleh lubar di atas.


Oke, saya sudah menambahkan lebih banyak detail, apakah itu lebih baik?
Michael Clark

1
Ya! Saya sudah memberi suara positif, karena jawaban asli Anda menempatkan saya di jalur yang benar, tetapi dengan keadaan sekarang, pembaca di masa mendatang tidak perlu terlalu mengutak-atiknya untuk mencari tahu apa artinya semua itu. :-) Bersulang.
Michael Scheper

3

Jika Anda bekerja di d3.v4, seperti yang disarankan, Anda dapat menggunakan contoh ini menawarkan semua yang Anda butuhkan.

Anda mungkin hanya ingin mengganti data sumbu X dengan "hari" Anda, tetapi ingatlah untuk mengurai nilai string dengan benar dan tidak menerapkan rangkaian.

parseTime mungkin juga melakukan trik untuk skala hari dengan format tanggal?

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)");

bermain-main dengan css / js global


1

D3 menyediakan seperangkat komponen tingkat rendah yang dapat Anda gunakan untuk menyusun bagan. Anda diberi blok penyusun, komponen sumbu, penggabungan data, seleksi, dan SVG. Tugas Anda adalah menyatukannya untuk membentuk bagan!

Jika Anda menginginkan grafik konvensional, yaitu sepasang sumbu, label sumbu, judul grafik dan area plot, mengapa tidak melihat d3fc ? ini adalah satu set sumber terbuka dari komponen D3 yang lebih tinggi. Ini mencakup komponen bagan kartesian yang mungkin Anda butuhkan:

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);

Anda dapat melihat contoh yang lebih lengkap di sini: https://d3fc.io/examples/simple/index.html


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

atau

xAxis: {
   axisLabel: 'Label here'
},
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.