Линейная диаграмма Angular-nvd3 с линиями, отображаемыми за пределами диаграммы

Question

Я использую Krispos angular-nvd3 для визуализации линейной диаграммы. По какой-то причине линии отображаются за пределами графика или даты неправильные. Ось x представляет собой временной масштаб, а минимальные и максимальные значения xDomain устанавливаются с использованием datepicker.

При настройке xDomain график отображается с выбранными датами начала и окончания с минимальными и максимальными значениями оси x. Тем не менее, линии отображаются за пределами временного интервала из-за того, что набор данных имеет минимальную дату, предшествующую выбранной дате начала. В этом примере дата начала выбран 2015-08-08 и конечную дату 2015-11-08:

Если я использую forceX вместо xDomain, чтобы установить минимальные и максимальные значения , линии отображаются в сетке диаграммы. Но в этом случае минимальная дата набора данных перед выбранной датой начала, поэтому ось x начинается с 2015-07-07 вместо 2015-08-08. Иллюстрированные ниже:

Таковы основные параметры диаграммы используются. xDomain или forceX установлены динамически.

$scope.chartOptions = { chart: { type: 'lineChart', yDomain: [0,5], xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()], useInteractiveGuideline: true, interactiveLayer: { showGuideLine: true }, lines: { },
xScale: d3.time.scale(), xAxis: { showMaxMin: true, rotateLabels: -45, tickFormat: function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); } }, height: 350, margin : { bottom: 100 } } };

Нужен ли мне использовать диапазон в некотором роде, чтобы работать должным образом, т.е. визуализировать данные в пределах выбранной начальной и конечной только даты.

Благодарен за ваш ввод!

Answer 1

Решение этой проблемы заключается в использовании опции диаграммы clamp(), в данном случае:

xScale: d3.time.scale().clamp(true) 

Шкала дата устанавливается с помощью xDomain:

xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()]