在d3时间轴上显示其他所有刻度标签？

我有与使用自定义时间格式的x轴的D3图表：在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）每三个月有一个勾号和标签。

我该如何指定每个月绘制刻度，但每个第三个月只能显示标签？

来源

2016-08-12 Jonah Bishop

你可以做到这一点，独立于你的x轴使用自定义时间格式的事实。

一种解决方案是简单地发现在蜱的文本，将其取出：

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: "Jun"}, 
 
{month: "Jul"}, 
 
{month: "Aug"}, 
 
{month: "Sep"}, 
 
{month: "Oct"}, 
 
{month: "Nov"}, 
 
{month: "Dec"}, 
 
]; 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", width) 
 
\t .attr("height", height); 
 
\t 
 
var xScale = d3.scale.ordinal() 
 
    .domain(data.map(function(d){ return d.month})) 
 
    .rangeBands([0, width*0.95]) 
 
\t 
 
var xAxis = d3.svg.axis().scale(xScale) 
 
\t .orient("bottom"); 
 

 
svg.append("g") 
 
\t .attr("transform", "translate(10,100)") 
 
\t .attr("class", "x axis") 
 
\t .call(xAxis); 
 
\t 
 
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>

来源

2016-08-12 15:17:47

我有这个问题，我结束了使用CSS。各记号元素有两个孩子，<text>为标签和<line>网格线，所以你必须选择内部文本元素和网线将留在原地

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

（：

来源

2017-08-06 01:57:42

在d3时间轴上显示其他所有刻度标签？

回答

相关问题