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

Question

Tôi mới dùng mã 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 các thanh trong biểu đồ thanh là rộng. Vì vậy, tôi đang tìm cách xoay văn bản để chạy theo chiều dọc (chứ không phải theo chiều ngang) bên dưới xAxis.

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

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

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

Answer 1

Nếu bạn đặt biến đổi xoay (180), nó sẽ xoay phần tử so với nguồn gốc, không liên quan đến neo 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, có khả năng bạn đã xoay văn bản 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ẽ ở ⟨-200,100⟩. Nếu bạn muốn neo văn bản ở lại ⟨200,100⟩, thì bạn có thể sử dụng phép biến đổi để định vị văn bản trước khi xoay nó, do đó thay đổi gốc.

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

Một lựa chọn khác là sử dụng các tùy chọn cx và cy lập luận để SVG của rotate transform, do đó bạn có thể xác định nguồn gốc của luân chuyển. Điều này kết thúc lên được một chút dư thừa, nhưng cho đầy đủ, nó trông như thế này:

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

Answer 2

trơ trẽn gảy từ elsewhere, tất cả tín dụng cho tác giả.

lề chỉ bao gồm để hiển thị lợi nhuận dưới cùng sẽ đượ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)"); 

Answer 3

Một vấn đề với nhãn trục D3 xoay này là bạn phải áp dụng lại lôgic 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-thoát mà trục sử dụng để hiển thị các dấu và nhãn.

d3fc là thư viện thành phần có decorate pattern cho phép bạn có quyền truy cập vào kết nối dữ liệu thiếu được sử dụng bởi các thành phần.

Nó có một sự thay thế thả-in cho trục D3, nơi luân chuyển 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)'); 
    }); 

Chú ý rằng sự quay chỉ được áp dụng trên nhập lựa chọn.

Bạn có thể thấy một số sử dụng có thể khác đối với mô hình này trên axis documentation page.