D3：添加第二個Y軸，限制X軸刻度僅爲2

Question

使用D3 v.3，我想消除x軸上除兩個刻度標籤之外的所有標籤，並將第一個標籤直接放在y軸上，如屏幕截圖所示，第二個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節，但我不知道會在我現有的代碼通過切換到v受到影響。 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>