解决:
谢谢,tickValues给了我想要的结果。我使用了d3.min和d3.max中的值:
var xMin = d3.min(groups, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
var xMax = d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); });
x.domain([xMin,xMax]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%y-%m-%d'))
.orient("bottom")
.tickValues([xMin, xMax]);
问题:
所以我有一个D3js多系列折线图。
X轴是底部并且是时间(其范围取决于用户选择,甚至可以是几天,几周,几个月或几年)。 Y轴是值,是十进制的。
我遇到的问题是轴上的标签是重叠的,看起来很差。
所以我的问题是,是否有办法只显示轴上的第一个日期和最后一个日期?
我基于这个图表: http://bl.ocks.org/3884955
我的x轴代码:
var x = d3.time.scale().range([0, dimensions.width]);
x.domain([
d3.min(groups, function (c) { return d3.min(c.values, function (v) { return v.date; }); }),
d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); })
]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%a %d'))
.orient("bottom")
.ticks(5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + dimensions.height + ")")
.call(xAxis);