X 轴文本标签不在 d3 中旋转

Posted 2023-02-22

【中文标题】X 轴文本标签不在 d3 中旋转

【英文标题】：X Axis text labels are not rotating in d3

【发布时间】：2021-05-01 08:17:20

【问题描述】：

我正在使用 D3 堆栈条形图。

小提琴是here

当我点击月份按钮时，图表出现一个凌乱的 x 轴标签

如果数据量很大，我想有条件地旋转 x 轴标签（在小提琴中，对于月份数据）

我的第一步是旋转标签。我正在附加以下部分。

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

我不确定，为什么它不起作用。这里有什么问题？

【参考方案1】：

您的代码没有问题 - 见下文：

var margin = top: 25, right: 25, bottom: 25, left: 25
var width = 600 - margin.left - margin.right;
var height = 200 - margin.top - margin.bottom;

// x domain
var x = d3.timeDays(new Date(2020, 00, 01), new Date(2025, 11, 01));

// x scale
var xScale = d3.scaleTime()
  .domain(d3.extent(x))
  .range([0, width]); 

// svg
var svg = d3.select("#scale")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate($margin.left,$margin.top)`);
   
// messy x-axis
svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", `translate(0,$height - 50)`)
  .call(d3.axisBottom(xScale)
    .ticks(d3.timeMonth)
  );

// x-axis with rotated labels
svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", `translate(0,0)`)
  .call(d3.axisBottom(xScale)
    .ticks(d3.timeMonth)
  )
  .selectAll("text") // YOUR CODE
  .style("text-anchor", "end") // YOUR CODE
  .attr("dx", "-.8em") // YOUR CODE
  .attr("dy", ".15em") // YOUR CODE
  .attr("transform", "rotate(-65)" ); // YOUR CODE 
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js"></script>
<div id="scale"></div>

您需要在小提琴中调整的是在draw 函数中的轴标签上应用旋转。所以从这里：

svg.selectAll("g.x.axis")
  .transition(t).call(xAxis);

到这里：

svg.selectAll("g.x.axis")
  .transition(t).call(xAxis)
  .selectAll("text") 
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", ".15em")
  .attr("transform", "rotate(-65)" );

轴会根据单击的按钮重新渲染，并且不会保留 svg 和两个轴 gs 的初始创建中的设置。

This 的回答可能有用。