2017-11-08 5 views
2

私は、これがx軸に、各日付に対応するデータポイントとなりたかったdatetimeformat d3にカスタム値を追加する方法は?

Q3 1954 
Q4 1954 
Q1 1955 
Q2 1955 
Q3 1955 
Q4 1955 
Q3 1955 
Q4 1955 
Q1 1956 

として指定された日付を持つデータセットを持っています。

D3 v4の軸にこのような種類の系列を指定するtimeFormatはありますか?

+0

これはあなたが必要とするものに非常に近いと思います。https://stackoverflow.com/questions/15471224/how-to-format-time-on-xaxis-use-d3-js – Cyril

+0

%YをtimeFormat関数を使用して年を取得しますが、 "Qn"を取得するために使用する書式指定子が不明です。 – c0d3

+0

これは、 '.tickFormat(function(d){任意のものを返す+ d3.time.format("%Y ")(d)})のようなことをする可能性があります" – Cyril

答えて

1

私はscaleBand()を使用してこの問題を解決できました。この軸の

コードスニペットは、私も時間enter link description here

おかげ@Cyrilからドキュメントを見つけ

var width = 800, height = 800; 

var ydata = [10, 15, 20, 25, 30]; 
var svg = d3.select("body") 
      .append("svg") 
      .attr("width", width) 
      .attr("height", height); 

var xaxis = d3.scaleBand() 
       .rangeRound([0, width]) 
       .padding(1); 

d3.csv("static/date.csv", function(data){ 
     xaxis.domain(data.map(function(d) { return d.date; })) 

     var x_axis = d3.axisBottom() 
         .scale(xaxis); 

     var xAxisTranslate = height/2 + 10; 

     svg.append("g") 
     .attr("transform", "translate(50, " + xAxisTranslate +")") 
     .call(x_axis) 
}); 

var yscale = d3.scaleLinear() 
       .domain([0, d3.max(ydata)]) 
       .range([height/2, 0]); 

var y_axis = d3.axisLeft() 
       .scale(yscale); 

svg.append("g") 
    .attr("transform", "translate(50, 10)") 
    .call(y_axis); 

enter image description here

です。

関連する問題