我是d3和前端的新手。 你能看一下并告訴我軸上的最大值沒有顯示嗎？比如沒有2015年或Y刻度上沒有39.50，盡管d3.max在陣列中看到它們。
https://codepen.io/DeanWinchester88/pen/QWgGMja
const xScale = d3.scaleLinear()
.domain([ d3.min(year), d3.max(year)] )
.range([paddings.paddingLeft,w - paddings.paddingRight - paddings.paddingLeft] ）。)
const xAxis = d3.axisBottom（xScale）。 tickFormat(d3.format("d") )。
svg.append("g")
.attr("transform", "translate(0," (h - paddings.paddingLeft) " ）")
.attr("id","X-axis")
.call（xAxis）。
const yScale = d3.scaleLinear()
.domain([ parseInt(d3. min(timings)), parseInt(d3.max(timings))] )
.range([h - paddings.paddingBottom, paddings.paddingTop] ）。)
const yAxis = d3.axisLeft（yScale）。 tickFormat( (d) => `( ${d. toFixed(2)}`）。)
svg.append("g"/span>)
.attr("transform", "translate(" paddings.paddingLeft " ，0) " )
.attr("id","y-軸")
.call(yAxis)
uj5u.com熱心網友回復：
正如評論中指出的，你如何決議y軸的域有一個問題：通過使用parseInt，你沒有捕捉到完整的域。這只影響到軸線的延伸范圍，而不是刻度線是否捕獲整個域。
默認的刻度線 至于刻度線，D3 軸會優先考慮干凈的數字和理想的刻度線數量（如果我沒記錯的話，默認為 10--盡管這個數字更像是一種建議而非約束）。此外，軸生成器不考慮軸的渲染尺寸。
如果我們有一個從 1.999 到 9.999 的域，我們將看到我們的刻度是 2,3,4,5,6,7,8,9，如上所述，優先考慮計數和圓度：
var scale = d3.scaleLinear()
.domain([1.999,9.999] )
.range([20,290] )
console.log(scale.ticks())。
d3.select("body"/span>)
.append("svg")
.attr("transform","translate(0,50)")
.call(d3.axisBottom(scale)); <script src="https://cdnjs. cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 軸延伸至9.999，只是這超出了最后一個刻度，這看起來確實有點奇怪
。雖然這比1.999、2.999、3.999......的刻度在數量和文字量上都要干凈，但它并沒有顯示出領域的范圍。
在某些情況下，增加刻度線的數量（axis.ticks(idealNumberOfTicks)）將導致理想的結果，當處理由代表年份的整陣列成的域時，這可能是真的，就像你的情況一樣。.ticks(d3.max(years)-d3.min(years));，這應該為每一年創建ticks，因為考慮到所需的ticks數，整數被認為是合適的整數。
指定具體的刻度線
我們可以通過 axis.tickValues([values]) 指定用作刻度線的值，這將設定軸中使用的刻度線。在你的年軸的例子中，這是相當直接的，我們希望每一個獨特的年份都有一個刻度，所以我們只需要創建一個包含每一年的陣列：
我們可以使用軸.tickValues([values])來指定用作刻度的值，這將設定軸中使用的刻度。
.tickValues(d3. range(d3.min(year),d3.max(year))。
它并不總是這么直接。使用上面片段中的示例刻度（更類似于您的y刻度），我們可以使用scale.ticks()提供的刻度，并添加兩個新的刻度，但這意味著在將手動刻度與自動生成的刻度相結合時，很有可能出現重疊或不規則的間距：
max(year); max(year)
var scale = d3.scaleLinear()
.domain([1.999,9.999] )
.range([20,290] )
var ticks = [1.999,...scale.ticks(),9.999] 。
var axis = d3.axisBottom(scale)
.tickValues(ticks)
.tickFormat(d3.format(" .3f"))
var svg = d3.select("body")
.append("svg")
.attr("transform","translate(0,60)")
.call(axis);
<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
我們可以將其變得更加復雜，以更好地設定刻度值，但這將非常依賴于資料，往往會導致非圓形的刻度值，并且可能通過使用scale.nice()來更好地解決，下面將介紹。
如果放棄自動生成的刻度線，特別是在處理時間或日期時，另一個選擇是使用 d3.time 來要求每隔一個指定的間隔就打一個刻度線，正如d3-axis docs中的例子所述。axis.ticks(d3.timeMinute.every(15));。
scale.nice()
比起手動添加或覆寫自動刻度線，有一個更好的選擇，這就是使用 scale.nice()，它：
擴展域，使其在漂亮的圓形值上開始和結束。
這個方法通常會修改刻度的域，并且可能只將邊界擴展到最接近的整數。
邊界擴展到最接近的圓值。一個可選的tick count引數
允許對用于擴展邊界的步長進行更大的控制。
保證回傳的刻度線將完全覆寫域。
如果域是由資料計算出來的，例如使用
程度，并且可能是不規則的。例如，對于一個[0.201479......]的域來說。
0.996679...]，一個好的域可能是[0.2, 1.0]。如果域有兩個以上的值，對域的劃分只影響到第一個和最后一個
值。(docs)
以我們上面的例子為例，我們得到：
var scale = d3.scaleLinear()
.domain([1.999,9.999] )
.range([20,290] )
.nice()
console.log(scale.ticks())。
d3.select("body"/span>)
.append("svg")
.attr("transform","translate(0,50)")
.call(d3.axisBottom(scale));
<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
這是我為您的y刻度提供的解決方案，而指定特定的刻度或使用axis.ticks()來指定刻度數是您的x軸的理想選擇。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320650.html
標籤：
下一篇：使用D3變焦時的特定鉻問題