[英]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.