x=0 处的轴标签不显示

Question

我正在使用 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 元素中。

为此编写代码：https://codepen.io/vijayst/pen/bLJYoK?editors=1111

Answer 1

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

手动添加左勾号：

由于 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))

与

.domain(d3.extent([new Date(2013, 12), new Date(2019, 1)]))

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

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

---

将特定的刻度推送到 d3 自动生成的刻度：

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

为此，请替换：

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

与

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

然后我们可以将一个新的特定刻度推送到 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);