javascript - X 轴文本标签不在 d3 中旋转
问题描述
我正在使用 D3 堆栈条形图。
小提琴在这里
如果有大量数据,我想有条件地旋转 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)" );
我不确定,为什么它不起作用。这里有什么问题?
解决方案
您的代码没有任何问题 - 见下文:
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
和两个轴g
的设置。
这个答案可能有用。
推荐阅读
- android - Android 项目构建在项目创建时失败
- c# - 代码的输出是它会告诉你输入了多少分数,并将用 4 种方法计算平均值
- javascript - 如何检测数组中未定义的变量?
- sql-server - 在标识列上插入值“0”并让它自动生成标识
- php - 如何通过 Laravel 在 Google Cloud App Engine 上托管 Lumen
- prolog - 将 Imogen(FOL 的直觉定理证明器)翻译成 Prolog 证明器?
- windows - 在现有项目的 Windows 上运行“堆栈”时出现 InvalidAbsFile 错误
- javascript - 从 URL 参数更新值
- mysql - 根据 postmeta meta_key 返回匹配的帖子
- javascript - 当复选框 == true 时,Javascript 增加 [i]