D3js가 x 축과 y 축의 눈금을 변경합니다.

Question

저는 D3JS에 익숙하지 않으며, CodeTuts에 선 그래프를 만드는 방법에 대한 지침을 따라 왔습니다.

내가 작성하고자하는 차트에는 시간당 사용자 수와 장치 범주가 표시되어야합니다. 사람들이 데스크톱 대신 태블릿이나 모바일으로 전환 할 때를 알 수 있기를 원하기 때문에 세 개의 배열을 만들었습니다. 다음과 같이 구축되어

배열 :

이

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

내 그래프는 이제 다음과 같습니다

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

: 내가 좀하고 싶습니다이 같은 X- 축 값을 설정하는 방법을 알고 Yaxis는 가장 낮은 기기 카테고리 (모바일 및 데스크톱)에 초점을 맞추어야하므로 yaxis는 다음과 같은 형식이어야합니다.

,794,325,154,는

그래서 같은 뭔가가 있어야한다 :

내 코드 : 당신이해야하는 경우

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]),