Как сделать локализацию по месяцам/дням для D3js?

Ответ 1

У меня была одна и та же проблема, и я нашел способ исправить ее без перекомпиляции d3.

https://github.com/mbostock/d3/wiki/Localization

В документации упоминается функция d3.locale, которая строит функции, используемые для форматирования чисел и дат. Поэтому, если вы называете это своими правилами локализации, вы на полпути.

var myFormatters = d3.locale({
  "decimal": ".",
  "thousands": ",",
  "grouping": [3],
  "currency": ["$", ""],
  "dateTime": "%a %b %e %X %Y",
  "date": "%m/%d/%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  "shortMonths": ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]
});

Следующий шаг - фактически сказать d3, чтобы использовать эти новые функции форматирования. Итак, для использования нового формата времени выполните следующее:

d3.time.format = myFormatters.timeFormat;

Ответ 2

Просто подумал, что я добавлю ответ @Adrian Salazar, потому что мне потребовалось некоторое время, чтобы все было правильно. Если вы делаете ось с временной шкалой d3 времени. Вы можете установить его в локаль с помощью timeFormat.multi

var localeFormatter = d3.locale({
    "decimal": ",",
    "thousands": ".",
    "grouping": [3],
    "currency": ["€", ""],
    "dateTime": "%a %b %e %X %Y",
    "date": "%d-%m-%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    "months": ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
    "shortMonths": ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
})

var tickFormat = localeFormatter.timeFormat.multi([
    ["%H:%M", function(d) { return d.getMinutes(); }],
    ["%H:%M", function(d) { return d.getHours(); }],
    ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
    ["%b %d", function(d) { return d.getDate() != 1; }],
    ["%B", function(d) { return d.getMonth(); }],
    ["%Y", function() { return true; }]
]);

axis.tickFormat(tickFormat);

Ответ 3

Вы можете создавать пользовательские форматы d3 и использовать time.js для локализации. Например, чтобы создать ось с локализованными датами:

var x = d3.time.scale();

var myTimeFormatter = function(date) {
    return moment(date).format("LL");
};

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

Затем используйте moment.lang, чтобы добавить поддержку дополнительных языков и переключить текущий язык. Обратитесь к http://momentjs.com/docs/#/i18n для уточнения.

Ответ 4

Из документации:

Реализация D3 привязана к языку во время компиляции на основе переменной среды $LOCALE.

Чтобы локализовать его в вашей среде, вам необходимо перекомпилировать d3.js(и d3.min.js) на машине с требуемыми настройками локали. Это заменит строки, которые вы видите в источнике.

Ответ 5

С D3 >= 4 я использую это, чтобы установить de_DE в качестве локали по умолчанию:

import { formatDefaultLocale } from 'd3-format';
import { timeFormat, timeFormatDefaultLocale } from 'd3-time-format';
import {
    timeSecond,
    timeMinute,
    timeHour,
    timeDay,
    timeMonth,
    timeWeek,
    timeYear,
} from 'd3-time';

// set default locale
formatDefaultLocale({
    "decimal": ",",
    "thousands": ".",
    "grouping": [3],
    "currency": ["", "\u00a0€"]
});

// set default time locale
timeFormatDefaultLocale({
    "dateTime": "%A, der %e. %B %Y, %X",
    "date": "%d.%m.%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
    "shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
    "shortMonths": ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
});

let formatMillisecond = timeFormat(".%L");
let formatSecond = timeFormat(":%S");
let formatMinute = timeFormat("%I:%M");
let formatHour = timeFormat("%I %p");
let formatDay = timeFormat("%a %d");
let formatWeek = timeFormat("%b %d");
let formatMonth = timeFormat("%B");
let formatYear = timeFormat("%Y");

function tickFormat (date) {
    function multiFormat (date) {
        return (timeSecond(date) < date ? formatMillisecond
            : timeMinute(date) < date ? formatSecond
            : timeHour(date) < date ? formatMinute
            : timeDay(date) < date ? formatHour
            : timeMonth(date) < date ? (timeWeek(date) < date ? formatDay : formatWeek)
            : timeYear(date) < date ? formatMonth
            : formatYear)(date);
    }
    return multiFormat(date);
}

axis.tickFormat(tickFormat);

Ответ 6

Несколько файлов: Перекомпиляция Lib и предоставление нескольких файлов из 10.000 строк кодов, отличающихся только 5 строками... это лучшая практика?

Патч для изменения "на лету": Поскольку языковая строка является частной, вы можете (или, скорее, нужно) запланировать D3.js. К сожалению, любая исправленная библиотека усложняет процессы обновления. Пример локализации "на лету" показан на интернационализация и локализация во время выполнения

Официальное обязательство: Майк Босток быстро отреагировал на это: фиксацию в локали-ветке. Кажется, это первый проект, но, возможно, он вам полезен.

dsuess

Ответ 7

Я сделал это, и он работал

var monthss = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
var x = d3.time.scale()
    .range([0, width]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.months)
    .tickFormat(function(d,i) { 
      if(i<monthss.length){
        return monthss[i];
      }
      return monthss[i-monthss.length]
     });

Если это потому, что я рисую два года. Надеюсь, что это поможет.