Question

这是xAxis在格式化日期后的外观：

如果格式正确，则不带formatTimeMonth（），只有parseTime（）xAxis。

格式化日期：

    var parseTime = d3.timeParse("%m/%d/%Y");
    var formatTimeMonth = d3.timeFormat("%b/%Y");
    data.forEach(function (d) {
        d.Month = formatTimeMonth(parseTime(d.Month));
    });

HeatMap：

heatMap
                    .width(900)
                    .height(800)
                    .dimension(dimension)
                    .group(FTEMonthGroup)
                    .margins({ left: 200, top: 30, right: 10, bottom: 35 })
                    .keyAccessor(function (d) { return d.key[0]; })
                    .valueAccessor(function (d) { return d.key[1]; })
                    .colorAccessor(function (d) { return +d.value.color; })
                    .title(function (d) {
                        return "Manager:   " + d.key[1] + "\n" +
                            "FTE:  " + d.value.toolTip + "\n" +
                            "Date: " + d.key[0] + "";
                    })
                    .on('renderlet', function (chart) {
                        chart.selectAll("g.cols.axis text")
                            .attr("transform", function () {
                                var coord = this.getBBox();
                                var x = coord.x + (coord.width / 2),
                                    y = coord.y + (coord.height / 2);
                                return "rotate(-45 " + x + " " + y + ")"

                            })
                            .style("text-anchor", "right");
                    });
                heatMap.colorCalculator(function (d, i) {
                    return d.value.color === null ?
                        '#ccc' : heatMap.colors()(d.value.color);
                });

Answer 1

这里的问题是您要将组密钥指定为字符串。 Crossfilter会将“自然顺序”应用于组中的键，因此您的键是按字母顺序排列的。

格式化刻度线而不更改顺序的最好方法是将键恢复为日期或日期字符串，然后使用colsLabel：

heatMap.colsLabel(d => formatTimeMonth(parseTime(d.Month)));

这等同于使用

chart.xAxis().tickFormat(...)

在其他大多数图表上。

（热图是不使用d3-axis的一些图表之一。我不知道原始作者是否在使用标准组件时遇到麻烦-我猜他们只是发现更容易重新发明轮子。）

格式化日期后尝试在heatMap上订购日期

1 个答案: