NVD3 图表的自动日期标签

Question

我希望日期标签在我更改焦点范围时自动计算、出现和消失，这样它们就不会重叠。

我正在使用带有焦点图表的多条形图，默认序号比例为 nv.models.multiBar()。当我在 xAxis 上使用 .ticks(availableWidth / 100 ) 时，它似乎为每个日期生成一个刻度标签，或者至少为其中的大量日期生成一个刻度标签：

在 nv.models.lineWithFocusChart() 上，标签会自动缩小以适合 space。这可能是因为它使用 nv.models.scatter() 的比例 d3.scale.linear()，但我不确定。我尝试使用以下方法创建自己的比例尺：

x = d3.scale.ordinal() //as well as x = d3.scale.linear()
      .domain(d3.extent(data.map(function(d) {
                return d.values.map(function(d,i) {
                    var X = getX(d,i);
                    return X.getTime();
                });
            })))
         .range([0, availableWidth]);

我得到以下的序数标度：

并且没有线性刻度的标签。这种方法行得通吗？如果是这样，我做错了什么？

在 nv.models.multiBarChart() 上，有一个 .reduceXTicks(BOOLEAN) 选项，但这只适用于 multiBarChart，似乎没有简单的方法可以将它添加到 nv.models.multiBar()。我能以某种方式使用它吗？

如果有什么我没有尝试过的，请告诉我。我不想自己计算标签并使用 .tickValues()

指定它们

Answer 1

解决方案实际上是对 x 轴使用 d3.scale.linear()。我在上面尝试的方法没有用，因为当我需要指定当前选择的最小值和最大值时，我指定了上下文图表的整个域。

在chart(selection) {...}中，我输入了

x = d3.scale.linear() 
     .range([0, availableWidth]);

在 onBrush() 中，我输入了 x.domain([new Date(extent[0]), new Date(extent[1])]);，其中 extent 包含选择的最小和最大日期（以毫秒为单位）。

NVD3 图表的自动日期标签

Automatic Date Labeling for NVD3 Graphs

javascript

graph

d3.js

nvd3.js