他のすべての目盛ラベルを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); 

は月ごとに目盛りを持つことであるが、唯一の3か月ごとにラベルを貼ります。しかし、私ができると思われるのは、（a）毎月のダニとラベル、または（b）3ヶ月ごとのダニとラベルです。

どのようにして毎月ティックを描くことができますが、3ヶ月ごとにラベルが表示されるだけですか？

Answer 1

これは、x軸がカスタムタイムフォーマットを使用しているかどうかに関係なく実行できます。

一つの解決策は、単にそのダニのテキストを見つけ、それを削除されています。私は3

チェックの倍数を取得するには、このスニペットをモジュロ（i%3）を使用してい

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

：

を

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>

Answer 2

私はこの問題を抱えていたので、CSSを使用してしまいました。あなたは内側のテキスト要素とグリッドラインを選択する必要がありますので、各チック要素は2人の子供、ラベルの<text>とグリッド線の<line>を持っている場所に滞在する

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

（：