d3刻度仅显示星期日:

Question

我希望我的比例从第一天开始到最后一天结束,而不是仅仅显示星期日:

我希望数据从:28(不是3)开始,但它从星期日的3开始:

我怎样才能在一周的任何一天开始我的规模？

我希望显示的日期与我给图表不显示星期日的数据相匹配.

链接到示例:http://jsfiddle.net/3LZua/2/

提前致谢.

PS这是代码:(在HTML中会有一个)

followerLineGraph = function(data)
{    
    var width = 400;

    var x = d3.time.scale()
        .domain([data[0].date, data[data.length - 1].date])
        .range([0, width]);

    var chart = d3.select("#test").append("svg").attr("class", "chart");

    //Date Label
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(data.length)
        .tickFormat(d3.time.format('%m/%d-%a'))
        .tickSize(0)
        .tickPadding(8);

    chart.append('g')
        .attr('fill', '#1ff')
        .call(xAxis);
}

    var data = [
      { date: new Date(2013, 1, 28), TotalLikes: 18 },
      { date: new Date(2013, 2, 14), TotalLikes: 15 },
      { date: new Date(2013, 2, 21), TotalLikes: 17 },
      { date: new Date(2013, 2, 28), TotalLikes: 17 },
      { date: new Date(2013, 3, 4), TotalLikes: 20 }
];

followerLineGraph(data);

Answer 1

我刚刚面临一个非常类似的问题,我无法在d3文档中找到答案.但是,我看了一眼d3源代码(https://github.com/mbostock/d3/blob/master/d3.js),我找到了以下行:

d3.time.weeks = d3.time.sunday.range;

记住这个提示:请注意,如文档中所述,

var xAxis = d3.svg.axis()
   .scale(x)
   .ticks(d3.time.weeks, 1);

在每个星期日给出一个带刻度线的轴 - 等等

var xAxis = d3.svg.axis()
   .scale(x)
   .ticks(d3.time.xxxday.range, 1);

给出了一个轴与每一个刻度xxxday,其中xxxday是monday,tuesday,wednesday,thursday,friday,saturday,或sunday.

Answer 2

你有几个选择.

在轴上调用"ticks"会将参数传递给基础比例,以获得要绘制的轴的列表刻度.传入单个数值时,比例将尝试生成"nice"值.数值是一个关于你可能理想的滴答数的提示 - 它不能保证你实际收到的数字.

.ticks(5)

结果:03/03-Sun 03/10-Sun 03/17-Sun 03/24-Sun 03/31-Sun

因为您使用的是时间刻度,所以您还可以选择指定刻度之间的时间量,例如:

.ticks(d3.time.days,7)

结果:03/01-Fri 03/08-Fri 03/15-Fri 03/22-Fri 03/29-Fri 04/01-Mon

这将每7天给你一个勾号.但我认为它仍将尝试包括像月初一样的"好"时间界限.

对于精细调整(但有点静态)的情况,您实际上可以使用轴上的tickValues方法准确指定您的ticks的位置.我用它来准确设置所有数据点的日期:

xAxis2.tickValues(data.map(function(d) { return d.date;}))

最后,您实际上可以将一个参数传递给ticks函数,以获得您想要的每次滴答.该函数将获得开始和结束,以便将标记设置为加上我所做的中点:

xAxis3.ticks(function(start, end) {
    console.log(arguments);
    var mid = new Date((start.getTime() + end.getTime()) / 2);

虽然在这种情况下,你应该设置的功能上规模,那么你可以通过轴(详见D3的文档中)调用使用的步骤参数.

你可以在这里玩小提琴.

另请查看比例刻度和轴tickValues的文档.还有一个很大的轴的教程在这里.