d3 eksen etiketleme

D3'teki eksenlere nasıl metin etiketleri eklerim?

Örneğin, x ve y eksenli basit bir çizgi grafiğim var.

X eksenimde 1'den 10'a kadar işaretlerim var. "Günler" kelimesinin altında görünmesini istiyorum, böylece insanlar x ekseninin günleri saydığını bilir.

Benzer şekilde, y ekseninde, 1-10 arası sayıları işaretliyorum ve "yenen sandviçler" kelimelerinin yanlamasına görünmesini istiyorum.

Bunu yapmanın kolay bir yolu var mı?

Eksen etiketleri, D3'ün eksen bileşeninde yerleşik değildir , ancak yalnızca bir SVG textöğesi ekleyerek etiketleri kendiniz ekleyebilirsiniz . Buna güzel bir örnek, Gapminder'ın animasyonlu balon şeması The Wealth & Health of Nations'ı yeniden oluşturmam . X ekseni etiketi şuna benzer:

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

Ve y ekseni etiketi şuna benzer:

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

Bu etiketleri istediğiniz gibi birlikte ( .label) veya tek tek ( .x.label, .y.label) biçimlendirmek için bir stil sayfası da kullanabilirsiniz .

Eğer üzerinden bir grafik ekseni oluştururken yeni D3js sürümü (itibaren sürüm 3) olarak, d3.svg.axis()fonksiyonun iki yöntemlere erişim çağrıda tickValuesve tickFormatyerleşik hangi işlevi içinde böylece değerleri belirtir için ve keneler ihtiyaç olabilir o da ne metnin görünmesini istediğiniz format:

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

Y ekseni etiketinin benim yaptığım gibi y ekseninin ortasında olmasını istiyorsanız:

1. Ortada metin bağlantısı ile metni 90 derece döndür
2. Metni orta noktasına göre çevir
   • x konumu: y ekseni onay etiketlerinin (-50 )
   • y konumu: y ekseninin orta noktasını eşleştirmek için ( chartHeight / 2)

Kod örneği:

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

Bu, yukarıda lubar'da belirtildiği gibi tüm koordinat sisteminin döndürülmesini önler.

D3.v4'te önerildiği gibi çalışıyorsanız, ihtiyacınız olan her şeyi sunan bu örneği kullanabilirsiniz.

Yalnızca X ekseni verilerini "günleriniz" ile değiştirmek isteyebilirsiniz, ancak dize değerlerini doğru bir şekilde ayrıştırmayı ve bitiştirmeyi uygulamamayı unutmayın.

parseTime, bir tarih formatıyla ölçekleme günleri için hile yapabilir mi?

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

küresel css / js ile keman

D3, çizelgeleri birleştirmek için kullanabileceğiniz oldukça düşük seviyeli bir dizi bileşen sağlar. Size yapı taşları, bir eksen bileşeni, veri birleştirme, seçim ve SVG verilir. Bir çizelge oluşturmak için onları bir araya getirmek sizin işiniz!

Geleneksel bir grafik, yani bir çift eksen, eksen etiketi, bir grafik başlığı ve bir çizim alanı istiyorsanız, neden d3fc'ye bir göz atmıyorsunuz ? daha yüksek seviyeli D3 bileşenlerinin açık kaynaklı bir kümesidir. İhtiyacınız olan şey olabilecek bir kartezyen grafik bileşeni içerir:

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

Burada daha eksiksiz bir örnek görebilirsiniz: https://d3fc.io/examples/simple/index.html

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

veya

xAxis: {
   axisLabel: 'Label here'
},