Oznakowanie na osi d3

Question

Jak dodać etykiety tekstowe do osi w d3?

Na przykład mam prosty wykres liniowy z osią X i Y.

Na mojej osi X mam tiki od 1 do 10. Chcę, aby pod tym słowem pojawiło się słowo "dni", aby ludzie wiedzieli, że oś X liczy dni.

Podobnie, na osi Y, mam numery 1-10 jako kleszcze i chcę, aby słowa "zjedzone kanapki" pojawiły się na boki.

Czy istnieje prosty sposób na zrobienie tego?

Answer 1

Etykiety osi nie są wbudowane w D23-e axis component, ale można dodać etykiety samemu, dodając element SVG text. Dobrym tego przykładem jest odtworzenie animowanego wykresu bąbelkowego Gapminder, The Wealth & Health of Nations. Etykieta osi x wygląda następująco:

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

a etykieta osi y tak:

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

Można również użyć arkusza stylów do stylu tych etykiet, jak chcesz, albo razem (.label) lub indywidualnie (.x.label, .y.label).

Answer 2

W nowej wersji D3js (wersja 3 roku), podczas tworzenia oś wykresu poprzez d3.svg.axis() funkcji masz dostęp do dwóch metod zwanych tickValues i tickFormat które są wbudowane wewnątrz funkcji, dzięki czemu można określa, które ceni cię potrzebne są kleszcze do iw jakim formacie chcesz pojawić się tekst:

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

Answer 3

Jeśli chcesz etykietę oś y w środku osi y tak jak ja:

1. Obracanie tekstu 90 stopni ze środkowym tekstem
2. tłumaczyć tekst jego środkowym
   • Pozycja X: w celu zapobieżenia nakładania się na osi y etykiet kleszczy (-50)
   • pozycji y: dopasować punkt środkowy osi Y (chartHeight/2)

próbki Kod:

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

zapobiega to obracaniu w układ współrzędnych otworu, jak wspomniano powyżej.

Answer 4

D3 zawiera zestaw komponentów na niskim poziomie, które można wykorzystać do montażu wykresów. Otrzymujesz bloki konstrukcyjne, komponent osi, połączenie danych, wybór i SVG. Twoim zadaniem jest złożyć je razem, aby utworzyć wykres!

Jeśli potrzebujesz standardowego wykresu, tj. Pary osi, etykiet osi, tytułu wykresu i obszaru wykresu, dlaczego nie spojrzeć na d3fc? jest to zestaw open source z bardziej wysokopoziomowymi komponentami D3.Obejmuje ona element wykresu kartezjańskiego, co może być to, czego potrzebujesz:

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

Można zobaczyć pełniejszy przykład tutaj: https://d3fc.io/examples/simple/index.html

Answer 5

Jeśli pracujesz w d3.v4, jak sugeruje, można użyć tej instancji oferując wszystko, czego potrzebujesz.

Możesz po prostu chcieć zamienić dane osi X na "dni", ale pamiętaj, aby poprawnie analizować wartości ciągów i nie stosować konkatenacji.

parseTime może równie dobrze poradzić sobie z skalowaniem dni w formacie daty?

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

fiddle with global css/js

Answer 6

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

lub

xAxis: { 
    axisLabel: 'Label here' 
},