[英]what scale to use for representing years only on x axis in d3 js
我一直在開發 D3 Js 中年(x 軸)與收入(y 軸)的面積圖。數據如下:
localData=[
{"Revenue":"4.5","Year":"2011"},
{"Revenue":"5.5","Year":"2010"},
{"Revenue":"7.0","Year":"2012"},
{"Revenue":"6.5","Year":"2013"}
]
對於面積圖,我想要 x 軸的年份和 y 軸的收入。目前我正在使用 x 軸的時間刻度,但我不知道如何使用它,因為我沒有日期格式,我只能表示年份。
我當前的代碼是:
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function (d) { return x(d.Year); })
.y0(height)
.y1(function (d) { return y(d.Revenue); });
$("#chartArea").html("");
var svg = d3.select("#chartArea").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(localData, function (d) { return d.Year; }));
y.domain([0, d3.max(localData, function (d) { return d.Revenue; })]);
svg.append("path")
.datum(localData)
.attr("class", "area")
.attr("d", area)
.attr("fill",color);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Revenue (M)");
目前我的 X 軸為 .011,.012,013,.014 我需要為 2011,2012,2013,2014 我是 D3 js 的新手,所以不知道如何使用比例??請幫助任何人..謝謝提前。
只需將刻度格式添加到您的 x 軸定義中:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y")); // <-- format
在 v4 中,它會是這樣的:
d3.axisBottom(x).ticks(d3.timeYear.every(1))
桓鋒說得對。 時間尺度將您的年份(隱式轉換為 int)視為時間戳。 要強制刻度在年份上運行,請創建指定其中年份的 Date 對象。 基本上更改以下行:
x.domain(d3.extent(localData, function (d) { return d.Year; }));
到
x.domain(d3.extent(localData, function (d) { return new Date(parseInt(d.Year),0); }));
然后您可以使用 Klaujesi 的解決方案來更改 tickFormat。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.