Как D3 вычисляет отображаемые значения даты на этой диаграмме?

Question

Я изучаю код в этом примере: https://bl.ocks.org/mbostock/978f6c03c9aab8af8594#data.tsv

var formatPercent = d3.format("+.0%"), 
    formatChange = function(x) { return formatPercent(x - 1); }, 
    parseDate = d3.time.format("%d-%b-%y").parse; 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.log() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickSize(-width, 0) 
    .tickFormat(formatChange); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.ratio); }); 

var area = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.ratio); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var gX = svg.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")"); 

var gY = svg.append("g") 
    .attr("class", "axis axis--y"); 

gY.append("text") 
    .attr("class", "axis-title") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .text("Change in Price"); 

d3.tsv("data.tsv", function(error, data) { 
    if (error) throw error; 

    // Compute price relative to base value (hypothetical purchase price). 
    var baseValue = +data[0].close; 
    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.ratio = d.close/baseValue; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.ratio; })); 

    area.y0(y(1)); 

    // Use a second linear scale for ticks. 
    yAxis.tickValues(d3.scale.linear() 
     .domain(y.domain()) 
     .ticks(20)); 

    gX.call(xAxis); 

    gY.call(yAxis) 
    .selectAll(".tick") 
     .classed("tick--one", function(d) { return Math.abs(d - 1) < 1e-6; }); 

    var defs = svg.append("defs"); 

    defs.append("clipPath") 
     .attr("id", "clip-above") 
    .append("rect") 
     .attr("width", width) 
     .attr("height", y(1)); 

    defs.append("clipPath") 
     .attr("id", "clip-below") 
    .append("rect") 
     .attr("y", y(1)) 
     .attr("width", width) 
     .attr("height", height - y(1)); 

    svg.append("path") 
     .datum(data) 
     .attr("clip-path", "url(#clip-above)") 
     .attr("class", "area area--above") 
     .attr("d", area); 

    svg.append("path") 
     .datum(data) 
     .attr("clip-path", "url(#clip-below)") 
     .attr("class", "area area--below") 
     .attr("d", area); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 
}); 

Как D3 вычислить отображаемый формат времени оси х?

Я вижу эту строку кода:

parseDate = d3.time.format("%d-%b-%y").parse; 

но как этот результат в датах в течение нескольких лет, что отображается как «апрель», «2009» и т.д.? Это автоматическая настройка в D3? Связано ли это с интервалом метки? Я не уверен, где сделаны настройки оси x.

Answer 1

Строка, которую вы цитируете, не имеет отношения к тому, как D3 выводит свои даты: это функция, которая преобразует даты в CSV (например, 11 февраля-08) в нечто полезное.

Шкала оси х определяется как time scale путем var x = d3.time.scale и формат задается значение по умолчанию в scale.tickFormat

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

следующие форматы времени считаются:

• % Y - за границами года, такие, как "2011".
• % B - для границ месяца, таких как «Февраль».
• % b% d - за неделю границ, таких как «февраль 06».
• % a% d - для дневных границ, таких как «Mon 07».
• % I% p - для границ часов, таких как «01 AM».

• % I:% M - за минуту границ, таких как «01:23».

• :% S - для вторых границ, таких как «: 45».

• .% L - миллисекунды для всех других периодов времени, например «.012».

В основном, магия D3 на работе