私は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);
です。
これはあなたが必要とするものに非常に近いと思います。https://stackoverflow.com/questions/15471224/how-to-format-time-on-xaxis-use-d3-js – Cyril
%YをtimeFormat関数を使用して年を取得しますが、 "Qn"を取得するために使用する書式指定子が不明です。 – c0d3
これは、 '.tickFormat(function(d){任意のものを返す+ d3.time.format("%Y ")(d)})のようなことをする可能性があります" – Cyril