dán nhãn trục d3

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

Ví dụ, tôi có một đồ thị đường đơn giản với trục x và y.

Trên trục x của tôi, tôi có dấu tích 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 là dấu tích và tôi muốn các từ "đã ăn bánh mì" xuất hiện ở một bên.

Có một cách đơn giản để làm điều này?

Nhãn trục không được tích hợp sẵn vào thành phần trục của D3 , nhưng bạn có thể tự thêm nhãn đơn giản bằng cách thêm textphần tử SVG . Một ví dụ điển hình về điều này là việc tôi tái tạo biểu đồ bong bóng hoạt hình của Gapminder, Sự giàu có & Sức khỏe của các Quốc gia . Nhãn trục x trông giống như sau:

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 biểu định kiểu để tạo kiểu cho các nhãn này theo ý muốn, cùng nhau ( .label) hoặc riêng lẻ ( .x.label, .y.label).

Trong phiên bản D3js mới (phiên bản 3 trở đi), khi bạn tạo trục biểu đồ thông qua d3.svg.axis()hàm, bạn có quyền truy cập vào hai phương thức được gọi tickValuesvà tickFormatđược tích hợp sẵn bên trong hàm để bạn có thể chỉ định những giá trị nào bạn cần đánh dấu và những gì định dạng 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");

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 văn bản ở giữa
2. Dịch văn bản theo điểm giữa của nó
   • x position: để ngăn chồng chéo các nhãn đánh dấu trục y ( -50)
   • vị trí y: khớp với điểm giữa của trục y ( chartHeight / 2)

Mẫu mã:

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

Điều này ngăn cản việc quay toàn bộ hệ tọa độ như đã đề cập bởi lubar ở trên.

Nếu bạn làm việc trong d3.v4, như được đề xuất, bạn có thể sử dụng phiên bản 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 bằng "ngày" của mình nhưng hãy nhớ phân tích cú pháp các giá trị chuỗi một cách chính xác và không áp dụng nối.

parseTime cũng có thể thực hiện thủ thuật 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)");

nghịch ngợm với css / js toàn cầu

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

Nếu bạn muốn có một biểu đồ thông thường, tức là một cặp trục, nhãn trục, tiêu đề biểu đồ và một vùng âm mưu, tại sao bạn không xem d3fc ? nó là một tập hợp mã nguồn mở gồm nhiều thành phần D3 cấp cao hơn. Nó bao gồm một thành phần biểu đồ Cartesian 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ể xem một ví dụ đầy đủ hơn tại đây: https://d3fc.io/examples/simple/index.html

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

hoặc là

xAxis: {
   axisLabel: 'Label here'
},