Question

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

我希望数据从：28（不是3）开始，但它从星期日的3开始：

如何在一周的任何一天开始我的量表？

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

提前致谢。

P.S。这是代码:(在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，{{ 1}}，friday或saturday。

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文档中的更多内容）。

你可以玩小提琴here。

另请查看scale ticks和axis tickValues的文档。还有一个很棒的轴教程here。

d3刻度仅显示星期日：

2 个答案: