在d3时间轴上显示每隔一个刻度标签？ [英] Show every other tick label on d3 time axis?

问题描述

我有一个使用自定义时间格式的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）; 
  

我想要做的是每个月都有一个tick，每三个月的标签。然而，我似乎能够做的是，（a）每个月有一个刻度和标签，或（b）每三个月有一个刻度和标签。

$ b $

解决方案

如何指定每个月绘制一个标签， >

一个解决方案是简单地找到该刻度中的文本并删除它：

p>

  var ticks = d3.selectAll（。tick text）; 
 ticks.attr（class，function（d，i）{
 if（i％3！= 0）d3.select（this）.remove（）; 
} 
  

我使用模数（ i％3 ）获取3的倍数。

检查此代码段：

  var width = 550，height = 200; var data = [{month：Jan}，{month：Feb}，{month：Mar} ，{month：Apr}，{month：May}，{month：May}，{month：Jun}，{month：Jul月：Oct}，{month：Nov}，{month：Dec}，]; var svg = d3.select（body）.append（svg）.attr（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>  

I've got a d3 chart with an x-axis that uses a custom 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'd like to be able to do is to have a tick for each month, but only a label for each third month. All I seem to be able to do, however, is to either (a) have a tick and label for each month or (b) have a tick and label for every third month.

How can I specify to draw ticks every month, but only have the labels show up for every third month?

解决方案

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

One solution is simply finding the text in that tick and removing it:

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

I'm using the modulo (i%3) to get the multiples of 3.

Check this snippet:

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>

这篇关于在d3时间轴上显示每隔一个刻度标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！