在d3时间轴上显示每个其他刻度标签？

Question

我有一个带有x轴的d3图表,它使用自定义时间格式:

var x = d3.time.scale.utc()
        .domain([start, end])
        .range([0, width]);

var customTimeFormat = d3.time.format.utc.multi([
    ["%b %d", function(d) { return d.getUTCDate() != 1; }],
    ["%b", function(d) { return d.getUTCMonth(); }],
    ["%Y", function() { return true; }]
]);

var xAxisTop = d3.svg.axis()
                .scale(x)
                .orient("top")
                .tickFormat(customTimeFormat)
                .innerTickSize(-height)
                .outerTickSize(0)
                .ticks(d3.time.month.utc, 1);

我希望能够做的是每个月都有一个勾号,但每三个月只有一个标签.然而,我似乎能够做到(a)每个月都有一个标记和标签,或者(b)每三个月都有一个标记和标签.

我如何指定每月绘制刻度,但每三个月只显示一次标签？

Answer 1

我认为 tickformats 在这里非常有用，可以保持干净，至少对我有用。

代码未经测试，但我只想提请注意我们如何操作 tickformat。

var xAxisTop = d3.svg.axis()
                .scale(x)
                .orient("top")
                .tickFormat((interval,i) => {
                  return i%3 !== 0 ? " ": interval;
                 })
                .innerTickSize(-height)
                .outerTickSize(0)
                .ticks(d3.time.month.utc, 1);

Answer 2

您可以独立于x轴使用自定义时间格式这一事实.

一种解决方案是简单地找到该刻度中的文本并将其删除:

var ticks = d3.selectAll(".tick text");
ticks.each(function(_,i){
    if(i%3 !== 0) d3.select(this).remove();
});

我正在使用modulo(i%3)来获得3的倍数.

检查此代码段:

var width = 550,
  height = 200;

var data = [{
    month: "Jan"
  },
  {
    month: "Feb"
  },
  {
    month: "Mar"
  },
  {
    month: "Apr"
  },
  {
    month: "May"
  },
  {
    month: "Jun"
  },
  {
    month: "Jul"
  },
  {
    month: "Aug"
  },
  {
    month: "Sep"
  },
  {
    month: "Oct"
  },
  {
    month: "Nov"
  },
  {
    month: "Dec"
  },
];

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scaleBand()
  .domain(data.map(function(d) {
    return d.month
  }))
  .range([0, width * 0.95])

var xAxis = d3.axisBottom(xScale);

svg.append("g")
  .attr("transform", "translate(10,100)")
  .attr("class", "x axis")
  .call(xAxis);

var ticks = d3.selectAll(".tick text");

ticks.each(function(_, i) {
  if (i % 3 != 0) d3.select(this).remove();
});

.axis path,
.axis line {
  fill: none;
  stroke: #4e5a64;
  shape-rendering: crispEdges;
}

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

Answer 3

我遇到了这个问题，最终使用了 CSS。每个刻度元素都有两个子元素，分别<text>用于标签和<line>网格线，因此您必须选择内部文本元素，网格线将保持原位

.tick:nth-child(3n) text {
    visibility: hidden;
}

(: