d3 trục ghi nhãn

Question

Làm cách nào để thêm nhãn văn bản vào trục trong d3?

Ví dụ: tôi có biểu đồ đường đơn giản với trục x và trục y.

Trên trục x, tôi có các dấu từ 1 đến 10. Tôi muốn từ "ngày" xuất hiện bên dưới nó để mọi người biết trục x đang đếm ngày.

Tương tự, trên trục y, tôi có các số từ 1-10 dưới dạng dấu tích và tôi muốn các từ "bánh mì ăn" xuất hiện sang một bên.

Có cách nào đơn giản để thực hiện việc này không?

Answer 1

Nhãn trục không được tích hợp vào D2's axis component, nhưng bạn có thể tự thêm nhãn bằng cách thêm phần tử SVG text. Một ví dụ điển hình cho điều này là tôi đã giải trí biểu đồ bong bóng hoạt hình của Gapminder, The Wealth & Health of Nations. Nhãn trục x trông như thế này:

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

Và nhãn trục y như thế nà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)"); 

Bạn cũng có thể sử dụng một stylesheet để tạo kiểu các nhãn như bạn muốn, hoặc là cùng (.label) hoặc riêng lẻ (.x.label, .y.label).

Answer 2

Trong phiên bản D3js mới (phiên bản 3 trở đi), khi bạn tạo một trục biểu đồ qua d3.svg.axis() chức năng bạn có quyền truy cập vào hai phương pháp gọi là tickValues và tickFormat được tích hợp bên trong hàm để bạn có thể xác định giá trị mà bạn cần ve cho và những gì định dạng mà bạn muốn văn bản xuất hiện:

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

Nếu bạn muốn nhãn trục y ở giữa trục y như tôi đã làm:

1. Xoay văn bản 90 độ với neo giữa văn bản
2. Dịch văn bản bằng cách điểm giữa
   • x vị trí của nó: để ngăn chặn sự chồng chéo của nhãn đánh dấu trục y (-50)
   • y vị trí: để phù hợp với điểm giữa của trục y (chartHeight/2)

mẫu Mã số:

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

này ngăn chặn xoay w lỗ phối hợp hệ thống như đã đề cập bởi lubar ở trên.

Answer 4

D3 cung cấp bộ cấu phần mức độ khá thấp mà bạn có thể sử dụng để lắp ráp biểu đồ. Bạn được cung cấp các khối xây dựng, một thành phần trục, kết nối dữ liệu, lựa chọn và SVG. Đó là công việc của bạn để đặt chúng lại với nhau để tạo thành một biểu đồ!

Nếu bạn muốn biểu đồ thông thường, tức là một cặp trục, nhãn trục, tiêu đề biểu đồ và khu vực ô, tại sao không xem d3fc? nó là một bộ mã nguồn mở của các thành phần D3 cao cấp hơn.Nó bao gồm một thành phần biểu đồ Descartes đó có thể là những gì bạn cần:

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

Bạn có thể thấy một ví dụ hoàn chỉnh hơn ở đây: https://d3fc.io/examples/simple/index.html

Answer 5

Nếu bạn làm việc trong d3.v4, theo đề nghị, bạn có thể sử dụng trường hợp này cung cấp mọi thứ bạn cần.

Bạn có thể chỉ muốn thay thế dữ liệu trục X theo "ngày" của bạn nhưng hãy nhớ phân tích cú pháp giá trị chuỗi chính xác và không áp dụng nối.

parseTime cũng có thể thực hiện thủ thuật cho việc chia tỷ lệ ngày với định dạng ngày?

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

hoặc

xAxis: { 
    axisLabel: 'Label here' 
},