d3.js Nice End Ticks超越域

Question

我遇到了一個問題，我需要在我的一個軸比例上使用.nice()，以便ticks可以利用端點並正確分佈（而不是離開結尾點未使用）。

現在我修好了，出現了一個意想不到的問題。之後我叫.nice()像這樣：

var x = d3.time.scale().range([0, width]) 

x.domain(d3.extent(data, function(d) { return d.date; })).nice(); 

軸範圍現在到2018年這可能會帶來麻煩，因爲它看起來很造作，作爲其唯一的二月2017年很顯然，我沒有結晶球，我的數據在任何地方都沒有2018年，所以我唯一的猜測是這個函數在插值時過度了。

我喜歡/從字面上需要從.nice()或類似的東西插入滴答間距，但在同一時間，我不能插入我的數據領域。有沒有其他人有這個問題？可以帶來什麼？

Answer 1

你是在一塊岩石和一個艱難的地方。

這裏的問題在於D3軸生成器（特別是在使用時標時）並沒有考慮到這種自定義。

讓我們看看你的問題：當使用nice()時，你會得到結束刻度。但是，正如您所說的，最終值可能會超出域名，這是一個衆所周知的問題。

這裏是一個演示，今天的結束日期，但軸進入2020年

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

 
var xScale = d3.scaleTime().domain([new Date("1980-01-01"), new Date()]).range([20,480]).nice(); 
 

 
var xAxis = d3.axisBottom(xScale); 
 

 
var gX = svg.append("g").attr("transform","translate(0,50)").call(xAxis);

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

一個可能的解決方案是使用concat隨着規模的領域，以保證第一和域中的最後一個值將是第一個和最後一個tick，如下所示：

.tickValues(xScale.ticks(10).concat(xScale.domain())) 

並設置t他使用ticks來估計蜱的數量。以下是演示：

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

 
var xScale = d3.scaleTime().domain([new Date("1980-01-01"), new Date()]).range([20,480]); 
 

 
var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%Y")).tickValues(xScale.ticks(10).concat(xScale.domain())); 
 

 
var gX = svg.append("g").attr("transform","translate(0,50)").call(xAxis);

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

然而，正如你所看到的，蜱不是均勻分佈的，如你所願。

因此，對於您的問題，仍採用這種concat方法的替代解決方案，被調整的ticks值，直到我們使蜱顯得或多或少均勻間隔：

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

 
var xScale = d3.scaleTime().domain([new Date("1980-01-01"), new Date()]).range([20,480]); 
 

 
var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%Y")).tickValues(xScale.ticks(5).concat(xScale.domain())); 
 

 
var gX = svg.append("g").attr("transform","translate(0,50)").call(xAxis);

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

這就是說，這不是一個合適的解決方案，因爲我懷疑任何人都可以（沒有繁瑣的破解）軸開始和結束在確切的域限制和所有的蜱均勻間隔。