xAxis를 숫자 대신 달로 변경하십시오.

현재 6 개월 동안 데이터를 보여주는 라인 그래프를 작성 중입니다. 그래프를 멋지게 만들었지 만 이제는 맨 아래에 축을 작성하여 월을 말하고 각 플롯을 말한 달과 맞 춥니 다.xAxis를 숫자 대신 달로 변경하십시오.

참조 용으로 달의 데이터 배열과 해당 행에 사용 된 데이터의 배열을 배치했습니다. 각 달은 해당 데이터 (예 : 배열의 첫 번째 데이터 = 배열의 첫 번째 달)에 해당합니다.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta> 
 
    <meta charset="utf-8"> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 

 
    <style type="text/css"> 
 
    h1 { 
 
     font-size: 35px; 
 
     color: darkblue; 
 
     font-family: Helvetica; 
 
     border-bottom-width: 3px; 
 
     border-bottom-style: dashed; 
 
     border-bottom-color: black; 
 
    } 
 

 
    path { 
 
     stroke: steelblue; 
 
     stroke-width: 1; 
 
     fill: none; 
 
    } 
 
    
 
    body{ 
 
     font-family: sans-serif; 
 
    } 
 

 

 
    .axis { 
 
     shape-rendering: crispEdges; 
 
    } 
 

 
    .x.axis line { 
 
     stroke: lightgrey; 
 
    } 
 

 
    .x.axis .minor { 
 
     stroke-opacity: .5; 
 
    } 
 

 
    .x.axis path { 
 
     display: none; 
 
    } 
 

 
    .y.axis line, .y.axis path { 
 
     fill: none; 
 
     stroke: #000; 
 
    } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Resources used per Month</h1> 
 

 
    <script type="text/javascript"> 
 
    var m = [80, 80, 80, 80]; // margins 
 
    var w = 1000 - m[1] - m[3]; // width 
 
    var h = 400 - m[0] - m[2]; // height 
 

 
    var dataArrayMonths = ['April', 'May', 'June', 'July', 'August', 'September'] 
 
    var data = [1.5, 1.5, 1.5, 3.6, 3.6, 2.7,]; 
 

 
    var x = d3.scale.linear().domain([0, data.length]).range([0, w]); 
 

 
    var y = d3.scale.linear().domain([0, 4]).range([h, 0]); 
 

 
    var line = d3.svg.line() 
 
     .x(function(d,i) { 
 
     return x(i); 
 
     }) 
 
     .y(function(d) { 
 
     return y(d); 
 
     }) 
 

 
     var svg = d3.select("body").append("svg") 
 
      .attr("width", w + m[1] + m[3]) 
 
      .attr("height", h + m[0] + m[2]) 
 
      .append("svg:g") 
 
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 
 

 
     var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true); 
 
     
 
     svg.append("g") 
 
      .attr("class", "x axis") 
 
      .attr("transform", "translate(0," + h + ")") 
 
      .call(xAxis); 
 

 

 
     var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left"); 
 

 
     svg.append("g") 
 
      .attr("class", "y axis") 
 
      .attr("transform", "translate(-25,0)") 
 
      .call(yAxisLeft); 
 
     
 
     svg.append("path").attr("d", line(data)); 
 
     
 
    </script> 
 
    </body> 
 
</html>

내가 요구하고 어떻게 내가 x 축 내가 필요로하는 6개월 말을 얻고 나는 그것이 라인에 각각의 포인트 줄을 어떻게받을 수 있나요 않습니다.

미리 감사드립니다.

출처

2016-07-04 FateJudgement

그냥 레이블 tickformat을 추가

var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);

var xAxis = d3.svg.axis() 
       .scale(x) 
       .tickSize(-h) 
       .tickFormat(function(d, i){ 
        return dataArrayMonths[i/2] // for every month return the name 
       }) 
       .tickSubdivide(true);

Here the working jsFidlle

을

출처

2016-07-04 01:56:38 Klaujesi

xAxis를 숫자 대신 달로 변경하십시오.

답변

관련 문제