轉換爲d3js中的月份號碼

我想將數字轉換爲d3js中的當量月份，並且卡住了。數字以1,2,3 ... 12的形式出現，我想將它們轉換爲1月，2月... 12月。轉換爲d3js中的月份號碼

以下是我想出迄今：

var month = ["January","February","March","April","May","June","July", "August","September","October","November","December"]; 
    var yScale = d3.scale.linear() 
        .range([50,500]) 
        .domain([0,12]); 
    var y_axis = d3.svg.axis().scale(yScale).orient("left") 
          .tickValues(function(val){ 
          return month[val-1]; 
       });

我應該怎麼做才能達到我的目標？

來源

2017-08-01 dawit

我想你可能想要tickFormat()而不是tickValues。像大多數d3函數一樣，傳遞給tickFormat()的函數同時採用data和index。你會想要索引。所以，你可以這樣做：

var y_axis = d3.svg.axis().scale(yScale).orient("left") 
         .tickFormat(function(d, i){ 
         return month[i]; 
      });

編輯：

我不知道你的代碼的其餘部分的模樣，到這就是做事的快捷方式。但是，如果您使用的是像星期幾這樣的序號數據，則使用序號比例可以更好地使用或。

下面是使用基於周的天軸刻度的一個簡單的例子：

<html> 
<head> 
<script src="./d3/d3.min.js"></script> 
    <style> 
     .axis text { 
      font: 10px sans-serif; 
     } 
    </style> 
</head> 
<body> 
    <div id="chart"></div> 
<script> 
    var margin = {top: 20, right: 10, bottom: 10, left: 80}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

    var scale_y = d3.scaleOrdinal() 
     .domain(["January","February","March","April","May","June","July", "August","September","October","November","December"]) 
     .range(Array.from(new Array(12), (x,i) => i* (height/12))) 
    var yAxis = d3.axisLeft(scale_y) 

    var svg = d3.select("#chart") 
    .append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.left + margin.right) 

    var y_axis = svg.append("g") 
     .attr("class", "x axis") 
     .attr('transform', 'translate(' + margin.left + ',' + margin.top +')') 
     .call(yAxis); 

</script> 
</body> 
</html>

來源

2017-08-01 19:46:39

這聽起來很正確的方向但它不工作 – dawit

你看到在控制檯中的錯誤？ –

@ave查看不同方法的編輯。 –

轉換爲d3js中的月份號碼

回答

相關問題