Question

当显示以月为刻度的轴时，月份将附加到该月的最后一天。希望它能在月初。

工作样本可在以下位置查看：http://codepen.io/pcasa/pen/apYdwG

var svg = d3.select('#chart')
               .append("svg:svg")
               .attr("height", 100)
               .attr("width", 800);

svg.append('g')
   .attr('transform', 'translate(20,20)')
   .attr('class', 'main axis date');

svg.append('g')
              .attr('transform', 'translate(20,20)')
              .attr('class', 'main axis month')
              .selectAll('text')
                .style("text-anchor", "start")
                .attr('dx', 5)
                .attr('dy', 12);

var x = d3.scaleUtc()
            .range([0,760])
            .domain([new Date(2016, 7, 20),new Date(2016, 9, 2)])
            .clamp(true);

var x1DateAxis = d3.axisBottom(x)
               .ticks(d3.utcDay, 1)
               .tickFormat(d3.timeFormat('%d'))
               .tickSize(16, 0, 0);

var x1MonthAxis = d3.axisBottom(x)
              .ticks(d3.utcMonth, 1)
              .tickFormat(d3.timeFormat('%B'))
              .tickSize(24, 0, 0);

svg.select('.axis.month')
          .call(x1MonthAxis)
          .selectAll('text')
            .style('text-anchor', 'end');

svg.select('.axis.date')
          .call(x1DateAxis)
          .selectAll('text')
            .style('text-anchor', 'end')
            .attr('dy', -6)
            .attr('dx', -1);

Answer 1

这个在codepen中为我工作

var svg = d3.select('#chart')
               .append("svg:svg")
               .attr("height", 100)
               .attr("width", 800);

svg.append('g')
   .attr('transform', 'translate(20,20)')
   .attr('class', 'main axis date');

svg.append('g')
              .attr('transform', 'translate(20,20)')
              .attr('class', 'main axis month')
              .selectAll('text')
                .style("text-anchor", "start")
                .attr('dx', 5)
                .attr('dy', 12);

var x = d3.scaleUtc()
            .range([0,760])
            .domain([new Date(2016, 7, 20),new Date(2016, 9, 2)])
            .clamp(true);

var x1DateAxis = d3.axisBottom(x)
               .ticks(d3.utcDay, 1)
               .tickFormat(d3.timeFormat('%d'))
               .tickSize(16, 0, 0);

var x1MonthAxis = d3.axisBottom(x)
              .ticks(d3.utcMonth, 1)
              .tickFormat(d3.timeFormat('%B'))
              .tickSize(24, 0, 0);

svg.select('.axis.month')
          .call(x1MonthAxis)
          .selectAll('text')
            .style('text-anchor', 'start');

svg.select('.axis.date')
          .call(x1DateAxis)
          .selectAll('text')
            .style('text-anchor', 'start')
            .attr('dy', -6)
            .attr('dx', +3);

Answer 2

您的假设不正确。在D3中，scaleUTC()（相当于scaleTime()在协调世界时间内操作）比例确实显示在开头的月份标记一个月，而不是结束。

这可能是你错误的原因：尽管在d3.format这几个月从01开始......

月份为十进制数[01,12]。

...这使1月为01，12月为12，在纯JavaScript中，new Date()将月份设置为0到11 。也就是说，1月是0，12月是11。

我们可以很容易地看到以下代码段中的情况，我完全按照原样复制了代码，只更改了开始日期和结束日期：

.domain([new Date(2016, 0, 20),new Date(2016, 2, 2)])
//January here ---------^      March here-----^

您可以看到该比例从1月20日开始到3月2日结束。看看结果，“二月”和“三月”标签正好在各个月的开头：

var svg = d3.select('#chart')
               .append("svg:svg")
               .attr("height", 100)
               .attr("width", 800);

svg.append('g')
   .attr('transform', 'translate(20,20)')
   .attr('class', 'main axis date');

svg.append('g')
              .attr('transform', 'translate(20,20)')
              .attr('class', 'main axis month')
              .selectAll('text')
                .style("text-anchor", "start")
                .attr('dx', 5)
                .attr('dy', 12);

var x = d3.scaleUtc()
            .range([0,760])
            .domain([new Date(2016, 0, 20),new Date(2016, 2, 2)])
            .clamp(true);

var x1DateAxis = d3.axisBottom(x)
               .ticks(d3.utcDay, 1)
               .tickFormat(d3.timeFormat('%d'))                        .tickSize(16, 0, 0);

var x1MonthAxis = d3.axisBottom(x)
              .ticks(d3.utcMonth, 1)
              .tickFormat(d3.timeFormat('%B'))
              .tickSize(24, 0, 0);

svg.select('.axis.month')
          .call(x1MonthAxis)
          .selectAll('text')
            .style('text-anchor', 'end');

svg.select('.axis.date')
          .call(x1DateAxis)
          .selectAll('text')
            .style('text-anchor', 'end')
            .attr('dy', -6)
            .attr('dx', -1);

#chart {
  width: 800px;
  height: 100px;
  margin: 0 auto;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart"></div>

d3js x轴日期显示月末不在前面

2 个答案: