12

我希望我的规模从第一天开始到最后一天结束，而不是只显示星期天：

我希望数据从 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);
4

2 回答 2

43

我刚刚遇到了一个非常相似的问题，我无法在 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.

于 2013-07-03T04:55:47.513 回答
17

您在这里有几个选择。

在轴上调用“ticks”会将参数传递给底层比例以获得要绘制的轴的列表刻度。当您传入单个数值时，比例尺将尝试产生“不错”的值。数值是您理想情况下可能喜欢多少滴答声的提示 - 它不能保证您实际收到的数字。

.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 方法准确指定您希望刻度在何处。我用它来准确设置所有数据点的日期：

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);

尽管在这种情况下，您可能应该在刻度上设置函数，这样您就可以通过轴调用来使用 step 参数（请参阅 d3 文档中的更多信息）。

你可以在这里玩小提琴。

另请查看刻度刻度和轴刻度值的文档。这里还有一个很棒的轴教程。

于 2013-03-11T22:59:08.060 回答