D3 тики показывают только воскресенья:

Я хотел бы, чтобы мой масштаб начинался в первый день и заканчивался в последний день, а не просто показывал воскресенья:

Я хотел бы, чтобы данные начинались с: 28 (не 3), но начинается с 3, который является воскресеньем:

Как я могу начать свой масштаб в любой день недели?

Я хочу, чтобы показанные дни совпадали с данными, которые я даю графику, не показывающим воскресенья.

Ссылка на пример: http://jsfiddle.net/3LZua/2/

Спасибо заранее.

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

Ответ 1

У вас здесь несколько вариантов.

Вызов "тиков" на оси передаст аргументы базовой шкале, чтобы получить тики списка для рисования оси. Когда вы передаете одно числовое значение, масштаб попытается создать "хорошие" значения. Числовое значение - это подсказка о том, сколько тиков вам лучше всего подходит - это не гарантия того, сколько вы действительно получите.

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

Хотя в этом случае вы должны, вероятно, установить функцию на шкале, чтобы затем вы могли использовать аргументы шага путем вызова через ось (см. больше в документации d3).

Вы можете играть со скрипкой здесь.

Также ознакомьтесь с документацией для тиков галочки и axis tickValues . Здесь также есть отличный осциллограф .

Ответ 2

У меня возникла очень похожая проблема, и я не смог найти ответ в документации 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.