D3jsはx軸とy軸のティックを変更します

Question

私はD3JSを初めて使いました。私はCodeTutsで折れ線グラフを作成するチュートリアルに従っています。

私が作ろうとしているチャートには、1時間あたりのユーザー数とデバイスのカテゴリが表示されます。私は、デスクトップの代わりにタブレットやモバイルに切り替えるときを見たいので、私は3つの配列を作った。

配列は次のように構築されている：

var desktop = [ 
{ 
    'hour': 01, 
    'users': 20 
}, 
{ 
'hour': 08, 
'users': 800 
} 
]; 

私のグラフは次のようになります。

00 , 01, 02, 03, 04 ,05, etc.. 

： 私のようにx軸の値を設定する方法を知って取得したいと思いyaxisは最も低いデバイスカテゴリ（モバイルとデスクトップのため、yaxisは次のようになります）に焦点を当てるべきです：

00, 10, 20, 30, 40, 50, 60, 70, 80, 100, [maxvalue of users in desktop array] 

だから、それがあるべきこのような何か：

マイコード：

function makeChart(desktopData,mobileData,tabletData){ 
    var WIDTH = 1200, 
     HEIGHT = 300, 
     MARGINS = { 
       top:20, 
      right:20, 
      bottom:20, 
      left:50 
     } 
    var vis = d3.select("#visualisation"), 
     WIDTH = 1200, 
     HEIGHT = 300, 
     MARGINS = { 
      top: 20, 
      right: 20, 
      bottom: 20, 
      left: 50 
     }, 
     xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([00,23]), 
     yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,100]), 
     xAxis = d3.svg.axis() 
      .scale(xScale), 

     yAxis = d3.svg.axis() 
      .scale(yScale) 
      .orient("left"); 

    vis.append("svg:g") 
     .attr("class","axis") 
     .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
     .call(xAxis); 

    vis.append("svg:g") 
     .attr("class","axis") 
     .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
     .call(yAxis); 

    var lineGen = d3.svg.line() 
     .x(function(d){ 
      return xScale(d.uur); 
     }) 
     .y(function(d){ 
      return yScale(d.pageviews); 
     }); 
    vis.append('svg:path') 
     .attr('d', lineGen(desktopData)) 
     .attr('stroke','deepskyblue') 
     .attr('stroke-width',2) 
     .attr('fill','none'); 

    vis.append('svg:path') 
     .attr('d', lineGen(mobileData)) 
     .attr('stroke','orange') 
     .attr('stroke-width',2) 
     .attr('fill','none'); 

    vis.append('svg:path') 
     .attr('d', lineGen(tabletData)) 
     .attr('stroke','deeppink') 
     .attr('stroke-width',2) 
     .attr('fill','none'); 
} 

Answer 1

あなたが持っている必要がある場合は、軸の目盛りの値を強制するには、あなたがticks()またはtickValues()（とさえtickFormat()を使用することができます特定のフォーマットが表示されます）。例えば

：

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .ticks(24); // Will display 24 ticks (for 24 hours on x axis) 

あなたy axisのためには、あなたが最大値に0から規模のドメインを定義する必要があります。 代わり

yScale = d3.scale.linear() 
    .range([HEIGHT - MARGINS.top, MARGINS.bottom]) 
    .domain([00,100]), // All values above 100 will be out of the chart 

の（ここでは d3.max()を使用して）次のようにドメインを定義します。

var maxValue = d3.max(desktopArray, function(d){ return d.users }); 

var yScale = d3.scale.linear() 
    .range([HEIGHT - MARGINS.top, MARGINS.bottom]) 
    .domain([00, maxValue]),