在 d3 圖表的 y 軸上正確顯示所有月份

Question

嘗試為我的 y 軸使用 scaleTime() 並用所有 12 個月填充它。

在這里，我設置了范圍和域，然后使用 %B 應用完整的月份名稱格式。

const yScale = d3.scaleTime()
.domain([new Date().setMonth(0),new Date().setMonth(11)])
.range([h-padding, padding]);

const yAxis = d3.axisLeft(yScale)
      .tickFormat(d3.timeFormat("%B"));

我希望 y 比例在底部顯示一月，在頂部顯示十二月，並在兩者之間訂購所有月份。

相反，顯示的第一個月是二月，然后是所有月份，然后十二月顯示在最后一個刻度線的正下方。

下面是完整的代碼片段：

 document.addEventListener('DOMContentLoaded', async function() { const res = await d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json"); const BASE_TEMP = parseFloat(res.baseTemperature); document.getElementById("description").textContent =res.monthlyVariance[0]["year"] + "-" + res.monthlyVariance[res.monthlyVariance.length-1]["year"] + ": Base Temperature: " + BASE_TEMP; const w = 800; const h = 500; const padding = 60; const barWidth = (w-padding)/res.monthlyVariance.length; const barHeight = (h-padding)/12; const xScale = d3.scaleTime() .domain([new Date().setFullYear(d3.min(res.monthlyVariance, (d,i)=>parseInt(d["year"]))),new Date().setFullYear(d3.max(res.monthlyVariance, (d,i)=>parseInt(d["year"])))]) .range([padding, w - padding]); const yScale = d3.scaleTime() .domain([new Date().setMonth(0),new Date().setMonth(11)]) .range([h-padding, padding]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale) .tickFormat(d3.timeFormat("%B")); const svg = d3.select("#canvas") .append("svg") .attr("width", w) .attr("height", h); svg.append("g") .attr("id", "x-axis") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); svg.append("g") .attr("id", "y-axis") .attr("transform", "translate(" + padding + ",0)") .call(yAxis); svg.selectAll("rect") .data(res.monthlyVariance) .enter() .append("rect") .attr("width",barWidth) .attr("height",barHeight) .attr("x",(d,i)=>xScale(new Date().setFullYear(d["year"]))) .attr("y", (d,i)=>yScale(new Date().setMonth(parseInt(d["month"])-1))) .attr("data-year",(d,i)=>d["year"]) .attr("data-month",(d,i)=>d["month"]) .attr("data-temp",(d,i)=>(BASE_TEMP+parseFloat(d["variance"]))) .attr("class", "cell") .attr("fill", function(d,i){ let variance = parseInt(d["variance"]); let color = "green"; if (variance<-2) {color="blue"} else if (variance<-1) {color="lightgreen"} else if (variance<1) {color="green"} else if (variance<2) {color="orange"} else {color="red"} return color;}); });

 #container { position:absolute; width:800px; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align:center; } #title { font-size:20px; } .cell:hover { background:lightgrey; }

 <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.min.js"></script> <div id="container"> <div id="title">Variation in Monthly Land Temperature</div> <div id="description">Update this Message from Dataset</div> <div id="canvas"></div> </div> </body>

Answer 1

你有幾個選擇。 第一種最直接的方法是指定您想要的刻度數 - 在您的情況下為 12。

const yAxis = d3.axisLeft(yScale)
  .ticks(12)
  .tickFormat(d3.timeFormat("%B"));

使用這種方法，您可能會發現 d3 仍然無法呈現適當數量的滴答聲，這顯然令人沮喪。

根據文檔

指定的計數只是一個提示； 比例尺可能會返回更多或更少的值，具體取決於域。

另一種選擇是明確定義刻度值。

const tickValues = Array(12).fill(1).map((val, index) => new Date().setMonth(index));
const yAxis = d3.axisLeft(yScale)
  .tickValues(tickValues)
  .tickFormat(d3.timeFormat("%B"));

在 d3 圖表的 y 軸上正確顯示所有月份

問題描述

1 個解決方案

解決方案1
1 已采納 2019-02-12 13:24:29

在 d3 圖表的 y 軸上正確顯示所有月份

問題描述

1 個解決方案

解決方案1 1 已采納 2019-02-12 13:24:29

解決方案1
1 已采納 2019-02-12 13:24:29