pelabelan sumbu d3

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?

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

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

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.

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

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

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

atau

xAxis: {
   axisLabel: 'Label here'
},