D3.js x=0处的轴标签不显示

我用D3画了一个折线图。x=0时的值不显示

轴的代码如下所示

const xScale = d3
    .scaleTime()
    .domain(d3.extent(data[0].series, d => d.time))
    .range([xPadding, width - xPadding]);

const xAxis = d3
    .axisBottom(xScale)
    .ticks(4)
    .tickSizeOuter(0)
    .tickSizeInner(0)
    .tickFormat(d3.timeFormat('%Y'));

我不知道为什么它没有在x=0时显示标签，也就是2014年。在检查SVG时，只显示三个记号，但x=0处的记号不在SVG元素中

---

代码笔：

我看到不同的解决方案各有利弊。第三种解决方案应该是最干净、最通用的

手动添加左勾号： 由于d3自行处理x轴记号的位置，因此一种方法是（如果数据集是固定的）手动添加缺少的记号：

svg 
  .append("g")
  .append("text")
  .text("2014-02-01") // can be retrieved from data instead of being harcoded
  .style("font-size", 10)
  .style("font-family", "sans-serif")
  .attr("transform", "translate(0," + (height - yPadding + 10) + ")")

这看起来不错，但在这种情况下，如果对于给定的数据集，d3选择在轴的左边缘附近显示记号，则可能会出现问题。d3的记号和我们包含的标签可能重叠

---

将x刻度修改为在一年的第一天之前开始： 另一个解决方案是增加左侧的x轴范围，使其在第一个点的日期前一个月开始。要尝试此方法，我们可以替换：

.domain(d3.extent(data[0].series, d => d.time))

与

这允许d3在x轴开始处合法地包含2014年的“年份刻度”

但在这种情况下，第一个点将与x轴范围的起点有偏移

---

将特定记号推送到d3自动生成的记号： 另一种解决方案：我们可以将特定的记号推送到d3自动生成的记号上。但这需要将记号的格式修改为“%Y-%m”

为此，请更换：

.tickFormat(d3.timeFormat("%Y"));

与

然后，我们可以将新的特定记号推送到d3生成的记号集：

var ticks = xScale.ticks();
ticks.push(new Date(2014, 1, 1));
xAxis.tickValues(ticks);

并在图表的左侧和右侧添加一些填充，因为现在勾号标签的一部分显示在图表的外部：

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("padding-left", 15)
  .style("padding-right", 15);

---

您能提供一个JSFIDLE/等效的数据集和完整的代码，以便我们轻松复制吗？@XavierGuihot添加了一个代码笔-太棒了，谢谢。我放弃了时间部分，效果很好。示例：

moment（male.time）.startOf（'day'）.toDate（）

var ticks = xScale.ticks();
ticks.push(new Date(2014, 1, 1));
xAxis.tickValues(ticks);

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("padding-left", 15)
  .style("padding-right", 15);