Fatal编程技术网
  • d3.js/
  • D3.js 如何对D3js进行月/日本地化？

D3.js 如何对D3js进行月/日本地化？

d3.js

D3.js 如何对D3js进行月/日本地化？,d3.js,D3.js,我正在寻找一种在D3上进行本地化的方法 我找到了价值观 d3_time_days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], d3_time_dayAbbreviations = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], d3_time_months = [ "January", "February", "M

我正在寻找一种在D3上进行本地化的方法

我找到了价值观

d3_time_days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
d3_time_dayAbbreviations = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], 
d3_time_months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], 
d3_time_monthAbbreviations = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
在内部，但由于它们是D3的本地/专用设备，我（显然）无法访问它们

任何提示都很好，谢谢：）

更新1： 似乎只有重新编译才能做到这一点——但不能被窃取——所以最终在精简版中硬编码编辑——真是太遗憾了

更新2： 将尝试研究如何使D3接受“动态”本地化设置，如fx does it：

从：

D3的实现在编译时基于$locale环境变量固定为一个区域设置

为了将其本地化到您的环境中，您需要在机器上使用所需的语言环境设置重新编译d3.js（和d3.min.js）。这将替换您在源代码中看到的字符串。

多个文件： 重新编译库并提供10.000行代码的多个文件，仅5行不同。。。这是最佳实践吗

动态更改补丁： 由于区域设置字符串是私有的，您可以（或者更确切地说需要）修补D3.js。 不幸的是，任何修补过的库都会使更新过程复杂化。 动态定位的示例如所示

正式提交： 迈克·博斯托克很快做出反应，说他有一个错误。这似乎是初稿，但也许对你有帮助

dsuess

您可以创建自定义d3时间格式化程序，并使用矩.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
添加对其他语言的支持并切换当前语言。有关详细信息，请参阅。

我刚刚遇到了相同的问题，我找到了在不重新编译d3的情况下修复它的方法

文档中提到了函数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;
我只是想补充一下@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);
我这样做了，它成功了

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

var monthss=['Enero'，'Febrero'，'Marzo'，'Abril'，'Mayo'，'Junio'，'Julio'，'Agosto'，'Septiembre'，'Octubre'，'Noviembre'，'Diciembre']；
var x=d3.time.scale（）
.范围（[0，宽度]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.时间.月）
.1（函数（d，i）{

如果（i且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);



从“d3格式”导入{formatDefaultLocale}；
从“d3时间格式”导入{timeFormat，timeFormatDefaultLocale}；
进口{
秒，
时间分钟，
时间，
时间日，
时间月，
《时代周刊》，
时间年，
}从“d3时间”开始；
//设置默认语言环境
formatDefaultLocale({
“十进制”：“，”，
“千”：“，
“分组”：[3]，
“货币”：[“”，“\u00a0欧元”]
});
//设置默认时间区域设置
timeFormatDefaultLocale({
“日期时间”：“%A，订单%e.%B%Y，%X”，
“日期”：“%d.%m.%Y”，
“时间”：“%H:%M:%S”，
“期间”：[“上午”、“下午”]，
“天”：[“桑塔格”、“蒙塔格”、“迪恩斯塔格”、“米特沃奇”、“唐纳斯塔格”、“弗雷塔格”、“桑斯塔格”]，
“短日”：[“So”、“Mo”、“Di”、“Mi”、“Do”、“Fr”、“Sa”]，
“月份”：[“1月”、“2月”、“马尔兹”、“4月”、“Mai”、“Juni”、“Juli”、“8月”、“9月”、“Oktober”、“11月”、“Dezember”]，
“短月”：[“1月”、“2月”、“Mrz”、“4月”、“5月”、“6月”、“7月”、“8月”、“9月”、“Okt”、“11月”、“Dez”]
});
设formatmillished=timeFormat（“.%L”）；
设formatSecond=timeFormat（“：%S”）；
让formatMinute=timeFormat（“%I:%M”）；
设formatHour=timeFormat（“%I%p”）；
让formatDay=timeFormat（“%a%d”）；
让formatWeek=timeFormat（“%b%d”）；
设formatMonth=timeFormat（“%B”）；
设formatYear=timeFormat（“%Y”）；
函数格式（日期）{
函数多格式（日期）{
返回（时间秒（日期）
您希望以何种方式进行本地化？如果您有date对象，则调用
.getDay（）
将为您提供一个周日为0的整数值。要格式化数字，请使用
d3.format=myFormatters.numberFormat；
这对时间轴刻度不起作用，因为
d3.time.scale
使用一些内部符号，我看不到从外部重新创建它的方法。重写
d3.time.format
似乎不起作用这是因为时间格式是用内部的
d3\u time\u格式制作的。也就是说版本3.4.11。除了一般糟糕的i18n设计外，还可以通过修补来解决问题，
d3.time.format.multi
本身就是一个挑战，因为它不能映射到CLDR格式。例如，即使一个人的月名本地化了订单或月份和date可以是不同的，并且是l10n本身的一个主题。只需看看示例：像一个符咒一样工作。Thx

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