如何在D3.js中移动分组条形图的Y轴刻度线

我来帮你搞定移动Y轴刻度线的问题！先结合你提供的代码结构，给你几个实用的调整方案：

首先，补全你未完成的Y轴绘制代码（基于D3常规写法） #

你的代码最后截断了，我先补充完整常见的Y轴生成逻辑，方便后续调整：

// 原代码后续补充部分
var y = d3.scaleBand()
    .domain(daysDataset)
    .range([height, 0])
    .padding(0.1);

// 创建Y轴（默认左侧）
var yAxis = d3.axisLeft(y);

// 绘制Y轴到SVG中
svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)
    .call(yAxis);

方案1：整体移动Y轴（含刻度线和标签） #

如果想让整个Y轴（包括刻度线、刻度标签）一起偏移，最直接的方式是调整以下两个参数：

• 修改margin.left的值：比如把原代码里的left: 100改成left: 120，Y轴会整体右移20px
• 或者调整Y轴的transform属性：把translate(${margin.left}, ${margin.top})改成translate(${margin.left + 20}, ${margin.top})，同样实现整体偏移

方案2：单独移动刻度线（不移动轴本身） #

如果只想调整刻度线的位置，不想移动Y轴线和标签，可以在绘制完Y轴后，单独选中刻度线元素修改位置：

// 绘制完Y轴后执行这段代码
svg.select(".y-axis")
    .selectAll(".tick line")
    // 示例：把刻度线向左延伸10px，改成正数则向右偏移
    .attr("x1", -10)
    // 如果想让刻度线贯穿整个图表宽度，设置x2为图表宽度值
    .attr("x2", width);

方案3：把刻度线移到Y轴右侧 #

如果想把刻度线从Y轴左侧换到右侧，只需把axisLeft换成axisRight，再调整轴的位置：

// 创建右侧Y轴
var yAxis = d3.axisRight(y);

// 绘制到图表右侧位置
svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", `translate(${margin.left + width}, ${margin.top})`)
    .call(yAxis);

你可以根据自己的需求选择对应的方案，比如只是微调刻度线位置选方案2，整体移动选方案1，切换刻度方向选方案3~

内容的提问来源于stack exchange，提问作者Rajkishan Swami