如何在D3.js中调整刻度长度与描边粗细，实现差异化刻度

你需要的是类似直尺的刻度效果：仅整数刻度显示标签，且刻度线更长、描边更粗；小数刻度无标签，刻度线更短、描边更细。D3的axis.tickSize()不支持直接设置变量值，但可以在轴生成后手动修改每个刻度元素的属性，具体实现如下：

1. 先正常生成基础轴 #

保留你现有代码的核心逻辑，先将轴渲染到SVG中：

var yAxis = d3.axisRight(y)
    .ticks(10)
    .tickSize(30) // 先设一个默认长度，后续会覆盖
    .tickFormat(function (d) {
        return d % 1 === 0 ? d + "°C" : "";
    });

// 将轴添加到SVG容器中（假设svg是你的SVG容器选择器）
svg.append("g")
    .attr("class", "y-axis")
    .call(yAxis);

2. 批量修改刻度的长度与描边粗细 #

轴生成完成后，选择所有刻度线（<line>元素），根据对应刻度值判断是否为整数，分别设置不同的属性：

d3.selectAll(".y-axis .tick line")
    .each(function(d) {
        // 判断当前刻度值是否为整数
        if (d % 1 === 0) {
            // 整数刻度：长刻度+粗描边
            d3.select(this)
                .attr("x2", -30) // 右轴刻度向左延伸，负值绝对值为长度
                .style("stroke-width", 2);
        } else {
            // 小数刻度：短刻度+细描边
            d3.select(this)
                .attr("x2", -15) // 短刻度长度可按需调整
                .style("stroke-width", 1);
        }
    });

补充说明 #

• 如果是左轴（axisLeft），刻度线向右延伸，需要把x2设为正值（比如15、30）。
• 你可以根据设计需求，调整整数/小数刻度的长度、描边粗细数值，完全匹配你的预期效果。

内容的提问来源于stack exchange，提问作者Robb Godshaw