Đặt trục y của biểu đồ d3 để phù hợp với nhãn rộng nhất?

Question

Tôi đang vẽ biểu đồ dạng đường với d3 và tất cả đều hoạt động tốt. Tuy nhiên, tôi phải để lại đủ lề ở bên trái của khu vực biểu đồ để phù hợp với bất cứ điều gì tôi nghĩ có thể là nhãn văn bản trục y rộng nhất. Tôi muốn điều chỉnh không gian này cho từng biểu đồ, tùy thuộc vào nhãn rộng nhất. Ban đầu tôi nghĩ rằng tôi có thể tìm thấy giá trị y tối đa, tạo một đối tượng văn bản ẩn, tìm ra độ rộng và sử dụng giá trị đó cho lề trái khi tạo biểu đồ. Một chút khó chịu, nhưng nó mang lại cho tôi một giá trị.

Tuy nhiên, nếu giá trị y tối đa là "1598.538", nhãn trục y trên cùng có thể là "1500" ... nghĩa là thu hẹp hơn rất nhiều.

Vì vậy, tôi đoán tôi muốn tìm chiều rộng của bất kỳ thứ gì thực sự sẽ là nhãn cao nhất. Nhưng tôi không thể nghĩ làm thế nào để làm điều đó mà không vẽ biểu đồ và trục, đo chiều rộng đó, và vẽ nó một lần nữa cho thực tế. Nghe có vẻ khó chịu! Có cách nào không khó chịu để làm điều này không?

CẬP NHẬT

Dưới đây là một phần của mã của tôi, sử dụng gợi ý Lars', chỉ để hiển thị mà nó phù hợp:

// I did have 
// `.attr("transform", "translate(" + margin.left + "," + margin.top ")")` 
// on the end of this line, but I've now moved that to the bottom. 
var g = svg.select("g"); 

// Add line paths. 
g.selectAll(".line").data(data) 
    .enter() 
    .append("path") 
    .attr("d", line); 

// Update the previously-created axes. 
g.select(".axis-x") 
    .attr("transform", "translate(0," + yScale.range()[0] + ")")) 
    .call(xAxis); 
g.select(".axis-y") 
    .call(yAxis); 

// Lars's suggestion for finding the maximum width of a y-axis label: 
var maxw = 0; 
d3.select(this).select('.axis-y').selectAll('text').each(function(){ 
    if (this.getBBox().width > maxw) maxw = this.getBBox().width; 
}); 

// Now update inner dimensions of the chart. 
g.attr("transform", "translate(" + (maxw + margin.left) + "," + margin.top + ")"); 

Answer 1

Bạn có thể đặt tất cả mọi thứ bên trong một yếu tố g và thiết lập transform dựa trên chiều rộng tối đa. Nội dung nào đó dọc theo dòng

var maxw = 0; 
yAxisContainer.selectAll("text").each(function() { 
    if(this.getBBox().width > maxw) maxw = this.getBBox().width; 
}); 
graphContainer.attr("transform", "translate(" + maxw + ",0)");