D3.js 如何在d3中拆分序数轴？

以下是我的绘制轴代码：

但是，tickPadding函数现在确实在序数轴类别之间引入了一个空格

---

更具体地说，我希望轴的夏季、冬季、秋季和春季部分彼此分开，有点像虚线。我怎样才能做到这一点呢？

我不知道d3轴内置了什么方法来实现这一点，但您可以删除它绘制的路径，并用虚线替换它，如下所示：

// Draw the axis, as you currently are
var axisElem = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// Remove the line
axisElem.selectAll("path.domain").remove();

// Figure out how big each dash should be
var gapFraction = 0.1; // The portion of the line that should be a gap
var total = x(seasons[1]) - x(seasons[0]);
var dash = total * (1 - gapFraction);
var gap = total * gapFraction;

// Draw the dashed line
axisElem.append("line")
    .classed("domain", true)
    .attr("x1", x(seasons[0]) - dash / 2 + gap / 2)
    .attr("x2", x(seasons[seasons.length - 1]) + dash / 2 - gap / 2)
    .attr("y1", 0)
    .attr("y2", 0)
    .attr("stroke", "black")
    .attr("stroke-dasharray", dash + "," + gap);

---

你能更具体地说明你想要的输出是什么吗？您是希望每个季节绘制一幅图，还是希望在穿过该图的每个刻度处都有一条垂直线？也许可以添加一张图片：当然，我想要如下内容：格式有点不对劲，但我希望你能有这个想法——夏天的费拉我不知道。我不是一个普通的用户，尽管我试图成为一个。再次感谢：没问题，很高兴它有帮助！

// Draw the axis, as you currently are
var axisElem = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// Remove the line
axisElem.selectAll("path.domain").remove();

// Figure out how big each dash should be
var gapFraction = 0.1; // The portion of the line that should be a gap
var total = x(seasons[1]) - x(seasons[0]);
var dash = total * (1 - gapFraction);
var gap = total * gapFraction;

// Draw the dashed line
axisElem.append("line")
    .classed("domain", true)
    .attr("x1", x(seasons[0]) - dash / 2 + gap / 2)
    .attr("x2", x(seasons[seasons.length - 1]) + dash / 2 - gap / 2)
    .attr("y1", 0)
    .attr("y2", 0)
    .attr("stroke", "black")
    .attr("stroke-dasharray", dash + "," + gap);