Question

我正在使用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轴上方。

Answer 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>

绘制轴上方的刻度文本

1 个答案: