有什么方法可以从 1 而不是 0 开始 XAxis

Question

我在这里创建了 JSFiddle enter link description here 这里我想从 XAxis 的 1 开始而不是 0

在下面的屏幕截图中，我想要 10 月 20 日在 11 月 20 日的地方

>   var xScaleTest =  d3.scaleTime()
                    .domain([new Date("2020-10-01"), new Date("2021-09-30")])
                    .range([0,  width-margin*2]);

/* Add Axis into SVG */ var xAxis = d3.axisBottom(xScaleTest).ticks(12).tickFormat(d3.timeFormat("%b -%y"));

Answer 1

您可以通过使用 d3.timeMonth.every 在每个月的第一天打勾，然后通过扩展域来获得。注意所有刻度线是如何存在的，并且在轴

的两侧都有额外的space

const x = d3.scaleTime()
  .domain([new Date("2020-9-15"), new Date("2021-10-15")])
  .range([50, 550]);

const xAxis = d3.axisBottom(x)
  .ticks(d3.timeMonth.every(1))
  .tickFormat(d3.timeFormat("%b -%y"));

d3.select("svg")
  .append("g")
  .call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="600"></svg>

如果您无法调整域名，您可以通过覆盖 .domain 路径手动将域名两侧加长：

const margin = 20;
const offsetX = 30;

const x = d3.scaleTime()
  .domain([new Date("2020-10-01"), new Date("2021-9-30")])
  // Narrow the range here
  .range([margin + offsetX, 600 - margin - offsetX]);

const y = d3.scaleLinear()
  .domain([0, 10])
  .range([100, margin]);

const ticks = d3.timeMonths(x.domain()[0], x.domain()[1]);
if (ticks[0].getMonth() !== x.domain()[0].getMonth()) {
  // Oct 1rst gets rounded up to November because of timezones
  ticks.unshift(x.domain()[0]);
}

const xAxis = d3.axisBottom(x)
  .tickValues(ticks)
  .tickSizeOuter(0) // Don't show the ticks at the edges of the domain
  .tickFormat(d3.timeFormat("%b -%y"));

d3.select("svg")
  .append("g")
  .attr("transform", "translate(0, 100)")
  .call(xAxis)
  .select('.domain')
  .attr('d', "M" + (x.range()[0] - offsetX) + ",0.5 H" + (x.range()[1] + offsetX));

d3.select("svg")
  .append("g")
  .attr("transform", "translate(" + margin + ", 0)")
  .call(d3.axisLeft(y));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<svg width="600"></svg>

有什么方法可以从 1 而不是 0 开始 XAxis

Is there any way to start XAxis from 1 instead of 0

d3.js

angularjs