D3：2番目のY軸のx軸のティックを2に制限する

Question

D3 v.3を使用して、x軸上の2つの目盛りのラベルをすべて削除して、スクリーンショットに示されているように、2番目のy軸の下に2番目の軸があります。私は、.ticks(count)機能が必ずしもあなたが求めるティック数を与えるわけではないことを理解しています。私が記述したように、ちょうど2つのダニを取得して配置するにはどうすればよいですか？ここで

は、私は、x軸を生成しています方法です：

// Set the ranges 
var xScale = d3.time.scale().range([0, width]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(xScale) 
    .orient("bottom") 
    .ticks(2) 
    .tickFormat(formatTime); 

（私はV.3に限られるものではないのですが、私はVに切り替えることで、私の既存のコードに影響を受ける可能性があるかわからないです。 4）。 ticksを使用して

Answer 1

ので、最善のアプローチではありません。（APIを引用、強調鉱山） "約はスケールの入力ドメインからの代表値をカウントを返す"

1. それ
2. を制御することはできません。ダニが生成されます。

ソリューション：

あなたはtickValues関数にxScaleドメインを渡す場合のみ、最初と軸の最後の日付を持っています。ここでは

.tickValues(xScale.domain()) 

はデモです：

var svg = d3.select("svg"); 
 

 
var xScale = d3.time.scale().range([30, 470]) 
 
    .domain([new Date(2016, 00, 01), new Date(2017, 11, 01)]); 
 

 
var xAxis = d3.svg.axis().scale(xScale) 
 
    .orient("bottom") 
 
    .tickValues(xScale.domain()) 
 
    .tickFormat(function(d) { 
 
    return d3.time.format("%b %Y")(d); 
 
    }); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,50)") 
 
    .call(xAxis)

path, 
 
line { 
 
    fill: none; 
 
    stroke: black; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<svg width="500" height="100"></svg>