D3：添加第二个 Y 轴，将 x 轴刻度限制为仅 2

【问题标题】：D3: Adding second Y-axis, limit x-axis ticks to only 2D3：添加第二个 Y 轴，将 x 轴刻度限制为仅 2
【发布时间】：2023-09-29 08:20:02
【问题描述】：

使用 D3 v.3，我想消除 x 轴上除两个刻度标签之外的所有标签，并将第一个直接放在 y 轴下方，第二个放在辅助 y 轴下方，如屏幕截图所示。我了解.ticks(count) 函数不一定会为您提供您要求的滴答数。我怎样才能得到两个刻度并按照我的描述放置？

这是我生成 x 轴的方式：

// Set the ranges
var xScale = d3.time.scale().range([0, width]);

// Define the axes
var xAxis = d3.svg.axis().scale(xScale)
  .orient("bottom")
  .ticks(2)
  .tickFormat(formatTime);

（我不限于 v.3，但我不确定切换到 v.4 可能会影响我现有代码的哪些内容）。

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

使用ticks 不是最好的方法，因为：

它“返回大约来自量表输入域的代表值”（引用 API，强调我的）
您无法控制生成刻度的位置。

解决方案：

如果您将 xScale 域传递给 tickValues 函数，则轴中将只有第一个和最后一个日期：

.tickValues(xScale.domain())

这是一个演示：

var svg = d3.select("svg");

var xScale = d3.time.scale().range([30, 470])
  .domain([new Date(2016, 00, 01), new Date(2017, 11, 01)]);

var xAxis = d3.svg.axis().scale(xScale)
  .orient("bottom")
  .tickValues(xScale.domain())
  .tickFormat(function(d) {
    return d3.time.format("%b %Y")(d);
  });

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(xAxis)

path,
line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>

【讨论】：