Show each mark of a mark on the time axis d3?

Question

I have a d3 chart with an x ​​axis that uses its own time format:

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);

What I would like to have is to make a mark for every month, but only a label for every third month. However, all I can do is to either (a) have a tick and a label for each month, or (b) have a tick and a label for every third month.

How can I specify to do ticks every month, but only tags appear on every third month?

Answer 1

You can do this regardless of the fact that your x axis uses a custom time format.

One solution just finds the text in this tick and removes it:

var ticks = d3.selectAll(".tick text");
ticks.attr("class", function(d,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.scale.ordinal()
    .domain(data.map(function(d){ return d.month}))
    .rangeBands([0, width*0.95])
	
var xAxis = d3.svg.axis().scale(xScale)
	.orient("bottom");

svg.append("g")
	.attr("transform", "translate(10,100)")
	.attr("class", "x axis")
	.call(xAxis);
	
var ticks = d3.selectAll(".tick text");

ticks.attr("class", function(d,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/3.4.11/d3.min.js"></script>

Answer 2

, CSS. tick , <text> <line> , , .

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

(: