d3-改变x轴的间隔

可以使用 d3 中的 tickFormat() 和 tickValues() 方法来改变 x 轴的间隔。具体步骤如下:

1. 定义一个新的 x 轴比例尺

var xScale = d3.scaleLinear() .domain([0, 100]) .range([0, width]);

2. 创建一个新的 x 轴

var xAxis = d3.axisBottom(xScale);

3. 添加一个新的 x 轴到 SVG 中

svg.append("g") .attr("transform", "translate(0," + height + ")") .call(xAxis);

4. 使用 tickFormat() 方法设置 x 轴的标签格式

xAxis.tickFormat(function(d) { return d + "%"; // 这里设置 x 轴标签的格式为数字后加上“%”符号 });

5. 使用 tickValues() 方法设置 x 轴的刻度间隔

xAxis.tickValues([0, 20, 40, 60, 80, 100]); // 这里设置刻度间隔为 20

完成以上步骤后即可改变 x 轴的间隔。