xoay văn bản trục x trong d3

Tôi chưa quen với mã hóa d3 và svg và đang tìm cách xoay văn bản trên xAxis của biểu đồ. Vấn đề của tôi là tiêu đề xAxis thường dài hơn so với các thanh trong biểu đồ thanh rộng. Vì vậy, tôi đang tìm cách xoay văn bản để chạy theo chiều dọc (thay vì chiều ngang) bên dưới xAxis.

Tôi đã thử thêm thuộc tính biến đổi: .attr ("biến đổi", "xoay (180)")

Nhưng khi tôi làm điều đó, văn bản biến mất hoàn toàn. Tôi đã thử tăng chiều cao của canvas svg, nhưng vẫn không thể xem văn bản.

Bất kỳ suy nghĩ về những gì tôi đang làm sai sẽ là tuyệt vời. Tôi có cần điều chỉnh vị trí x và y không? Và, nếu vậy, bao nhiêu (khó có thể khắc phục sự cố khi tôi có thể nhìn thấy nó trong Firebug).

Nếu bạn đặt một biến đổi xoay (180), nó sẽ xoay phần tử liên quan đến điểm gốc , không liên quan đến liên kết văn bản. Vì vậy, nếu các phần tử văn bản của bạn cũng có thuộc tính x và y được đặt để định vị chúng, rất có thể bạn đã xoay văn bản ra ngoài màn hình. Ví dụ, nếu bạn đã thử,

<text x="200" y="100" transform="rotate(180)">Hello!</text>

neo văn bản sẽ ở mức ⟨-200,100⟩. Nếu bạn muốn neo văn bản ở mức ⟨200,100⟩, thì bạn có thể sử dụng phép chuyển đổi để định vị văn bản trước khi xoay nó, do đó thay đổi điểm gốc.

<text transform="translate(200,100)rotate(180)">Hello!</text>

Một tùy chọn khác là sử dụng các đối số cx và cy tùy chọn cho phép biến đổi xoay của SVG , để bạn có thể chỉ định nguồn gốc của phép quay. Điều này kết thúc là hơi thừa, nhưng để hoàn chỉnh, nó trông như thế này:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>

Được lấy từ nơi khác một cách đáng xấu hổ , tất cả đều ghi công cho tác giả.

lợi nhuận chỉ bao gồm để hiển thị lợi nhuận dưới cùng nên được tăng lên.

var margin = {top: 30, right: 40, bottom: 50, left: 50},

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
     .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-65)");

Một vấn đề với các nhãn trục D3 xoay này là bạn phải áp dụng lại logic này mỗi khi bạn kết xuất trục. Điều này là do bạn không có quyền truy cập vào các lựa chọn nhập-cập nhật-thoát mà trục sử dụng để hiển thị dấu tích và nhãn.

d3fc là một thư viện thành phần có mẫu trang trí cho phép bạn truy cập vào phép nối dữ liệu cơ bản được các thành phần sử dụng.

Nó có một phần thay thế cho trục D3, trong đó việc xoay nhãn trục được thực hiện như sau:

var axis = fc.axisBottom()
  .scale(scaleBand)
  .decorate(function(s) {
    s.enter()
        .select('text')
        .style('text-anchor', 'start')
        .attr('transform', 'rotate(45 -10 10)');
  });

Lưu ý rằng xoay chỉ được áp dụng trên lựa chọn nhập.

Bạn có thể xem một số cách sử dụng có thể có khác cho mẫu này trên trang tài liệu trục .