在轴上方绘制刻度文本

【问题标题】：plotting tick text above the axis在轴上方绘制刻度文本
【发布时间】：2017-06-01 05:46:22
【问题描述】：

我正在使用 d3 v4 来绘制图表。目前，x 轴上的刻度文本位于轴下方。我希望在轴上方的文本。

//Set the Xaxis scale Range
        let x = scaleLinear().rangeRound([0, width]);
        let x_axis = axisBottom(x);

x.domain(extent(graphData, function (d) {
            return d.weeks;
        }));

g.append("g").attr("transform", "translate(0," + height + ")").call(axisBottom(x).ticks(5)).attr("transform", "translate(0, 120)");

你能帮我把刻度文本放在 x 轴上方吗？

【问题讨论】：

标签： d3.js graph

【解决方案1】：

如果您想在轴的顶部添加刻度，您应该使用axisTop，而不是axisBottom。

名称很容易理解，API 也很清晰：

d3.axisTop(scale)：在这个方向上，刻度被绘制在上方水平域路径。

d3.axisBottom(scale)：在这个方向上，刻度被绘制在下面水平域路径。（强调我的）

这是一个演示，第一个轴使用axisTop，下面的第二个轴使用axisBottom：

var svg = d3.select("svg");
var x = d3.scaleLinear().range([20, 280]);
var xAxisTop = d3.axisTop(x)(svg.append("g").attr("transform", "translate(0,50)"))
var xAxisBottom = d3.axisBottom(x)(svg.append("g").attr("transform", "translate(0,100)"))

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

【讨论】：