Question

我只是想在条形图的x轴上使用当地月份。首先，我想仅在x轴上表示月份，其次我希望在localeFrance中定义月份。

我已经分道扬..但我无法使其发挥作用：https://jsfiddle.net/xjp2o0wt/6/

所以这是我的代码。感谢您的宝贵帮助

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard</title>
<link rel="stylesheet" href="dc.css">
</head>

<body>
<div id=chart>
  here
</div>
<script src="crossfilter.js"></script>
<script src="d3.js"></script>
<script src="dc.js"></script>
<script>
var localeFrance = 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": ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
        "shortDays": ["lun", "mar", "mer", "jeu", "ven", "sa", "dim"],
        "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembrr", "Octobre", "Novembre", "Decembre"],
        "shortMonths": ["Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Juil", "Aou", "Sep", "Oct", "Nov", "Dec"]
      });
var dateFormat_in = d3.time.format.utc("%Y-%m-%d");
data=[{year:2017, month:1, value:12},{year:2017, month:2, value:15},{year:2017, month:3, value:12},
        {year:2017, month:4, value:16},{year:2017, month:5, value:14}]
data.forEach(function(d) {
    d["date"] = dateFormat_in.parse(d["year"]+"-"+d["month"]+"-01");
    d["value"] = +d["value"];
});     

ndx = crossfilter(data);   
timeChart = dc.barChart("#chart");
monthDim = ndx.dimension(d => d3.time.month.utc(d["date"]));
monthGroup = monthDim.group().reduceSum(d=>d.value); 
minDate = monthDim.bottom(1)[0]["date"];
maxDate = monthDim.top(1)[0]["date"];
timeChart
        .width(480)
        .height(320)
        .margins({top: 5, right: 30, bottom: 20, left: 50})
        .dimension(monthDim)
        .group(monthGroup)   
        .x(d3.time.scale().domain([minDate, maxDate]))
        .xUnits(d3.time.months)
      //.xUnits(localeFrance.timeFormat("%b"))
        .elasticY(true)
        .centerBar(true).xAxisPadding(15).xAxisPaddingUnit('month')
        .gap(16)
        .yAxis().ticks(1);
dc.renderAll();
 </script>

Answer 1

我可能会弄错，但是d3似乎并没有将国际语言环境构建到数据包中。我自己对这些东西不熟悉，所以我依靠SO上的其他一些答案提供了更多细节：

Localization of d3.js (d3.locale example of usage)

Where can in find the locale objects for d3.js for different countries

How to make localization on months / days for D3js?

我们可以像这样定义fr_FR语言环境：

var fr_FR = {
  "dateTime": "%A, le %e %B %Y, %X",
  "date": "%d/%m/%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
  "shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
  "months": ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
  "shortMonths": ["janv.", "févr.", "mars", "avr.", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."]
};
var frLocale = d3.locale(fr_FR);

来源：https://github.com/d3/d3-time-format/blob/master/locale/fr-FR.json

现在我们需要告诉x轴使用自定义区域设置：

timeChart.xAxis()
     .tickFormat(frLocale.timeFormat('%B'))
     .ticks(d3.time.months);

我们也在告诉它在这几个月里放屁股;否则d3轴会尝试绘制更多。

同样地，我们必须设置xUnits每月绘制一个条形图（我看到你的问题中有这个，但你的小提琴却有所不同）：

timeChart
        .xUnits(d3.time.months)

不幸的是，dc.js非常直接地使用x域，所以如果你使用.centerBar(true)，你还需要抵消你的最小和最大日期：

  minDate = new Date(monthDim.bottom(1)[0]["date"]);
  minDate.setDate(15)
  maxDate = new Date(monthDim.top(1)[0]["date"]);
  maxDate.setDate(15)

Etvoilà，你可能会说。：）

Fork of your fiddle.

在dc.js条形图上使用本地月份

1 个答案: