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

Question

使用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);

（我不限于第3版，但我不确定通过切换到第4版可能会对现有代码产生什么影响。）

Answer 1

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

1. “返回大约计算来自比例输入域的代表值”（引用API，强调我的）
2. 您无法控制其中将生成刻度。

<强>解决方案：

如果您将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>