Как заставить nvd3 отображать такое же количество тиков, как и у значений, нанесенных на график-nvd3

Как заставить график nvd3 отображать определенное количество тиков, например, пожалуйста, найдите под изображением графика:

как видно ниже, у меня есть 7 значений, помещенных в массив, содержащий 7 дней недели. Однако похоже, что у них больше тиков, чем фактических значений. Я ищу что-то похожее на это: http://nvd3.org/examples/line.html Однако, когда я наведу курсор на эти галочки, они смещены, как показано:

там, где должна быть линия графика, и там, где галочка hovered показывает tooltip.but, по какой-то причине у меня не отображается 7 тиков, вместо этого отображается 10 тиков, а все всплывающие подсказки выровнены. Я также попытался заставить nvd3 иметь определенный # клещей, но не сработало.

                chart2.xAxis
                .ticks(7)
                .tickFormat(function(d) {
                    return d3.time.format.utc('%b %d')(new Date(d));
                });

вот скрипка: http://jsfiddle.net/86hr7h1s/4/ идеале я должен отображать 7 дней и 7 тиков на графике, а не дублировать дни и 10 тиков на графике. Есть идеи, что не так и как это исправить?

РЕДАКТИРОВАТЬ::::::

Я смог решить свою проблему в течение 7 дней с помощью ответа ниже, используя tickValues ​​() вместо ticks(). Однако, для больших значений, скажем, отображать данные графика за 2 месяца, у меня будет 30 точек данных. Я все еще вижу, что мой график помечается при наведении курсора:

Как вы можете видеть выше, точки наведения все еще не совпадают с вертикальными отметками. Я не хочу принудительно устанавливать значения ticksValues ​​на графике более 7 дней. Есть идеи, как этого можно достичь?

К вашему сведению: я использовал это, чтобы nvd3 отображал 7 значений:

    var datas = this.graphFunction(data);
    chart2.xAxis.tickValues(datas[0].xAxisTickValues);

http://jsfiddle.net/86hr7h1s/5/

Спасибо!

Источник

2 ответа

Решение

Если вы хотите точно контролировать тики, вы должны использовать.tickValues ​​(), а не ticks ().

https://github.com/mbostock/d3/wiki/SVG-Axes

Источник

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

Причина проблемы с неточными делениями на оси X — неточное внутреннее числовое представление дат, которые мы хотим отобразить на оси X. Как мы видим здесь https://nvd3.org/examples/line.html , когда значения по оси X являются числами, все галочки отображаются точно. Когда мы хотим отобразить даты по оси X, нам также нужно преобразовать даты в некоторое числовое представление. Обычно даты преобразуются в числовое представление с помощью Date.prototype.getTime()функция, а затем метки форматируются с использованием кода, подобного этому chart.xAxis.tickFormat(d3.time.format('%b %Y')(date))Но точность, которую дает нам функция, в большинстве случаев избыточна. Предположим, мы хотим отобразить только месяцы и годы по оси x и иметь отсортированный список дат, в котором разные элементы всегда имеют разные мотыльки, но элемент с определенным месяцем может иметь любой день и время. Таким образом, может возникнуть ситуация, когда два соседних элемента списка хотя и имеют разные месяцы, но очень близки друг к другу (например, «28 февраля» и «1 марта»). Когда мы преобразуем эти элементы списка в числовое представление, используя getTime()функция, результирующий список больших чисел запоминает, насколько соседние элементы списка отстоят друг от друга. Так как расстояние между соседними точками диаграммы в диаграммах NVD3 всегда одинаково, NVD3 пытается точно настроить отображение меток, чтобы предоставить информацию о том, что некоторые числа близки друг к другу, а другие нет. Это приводит к неточному отображению меток или даже к дублированию меток, если на диаграмме мало точек.

Решение состоит в том, чтобы исключить избыточную информацию о дате и времени при преобразовании дат в числа. Мне нужно было отобразить только месяцы и годы по оси x, и этот код отлично работает для меня.

      function getChartData(data) {
  var values = data.map(function(val) {
    return {
        x: val.x.getUTCFullYear() * 12 + val.x.getUTCMonth(),
        y: val.y
      }
  });

  return [{
    values: values,
    key: 'date'
  }];
}

function formatDate(numericValue) {
  var year = Math.floor(numericValue / 12);
  var month = numericValue % 12;
  return shortMonthNames[month] + ' ' + year;
}
    
nv.addGraph(function() {
  var data = [
   ...
    {
      x: new Date(2020, 2, 15, 15, 12),
      y: 90
    },
    {
      x: new Date(2020, 3, 3, 3, 54),
      y: 50
    },
    ...
  ];
  
  var chart2 = nv.models.lineChart()
  .showXAxis(true)
  .showYAxis(true);
  
  chart2.xAxis.tickFormat(formatDate);
  
  d3.select('svg#svg')
  .datum(getChartData(data))
  .call(chart2);
  
  return chart2;
});

Здесь мы не используем .tickValues()Функция NVD3 и поэтому не мешает движку рендеринга по умолчанию, поэтому библиотека NVD3 может автоматически добавлять или удалять метки осей при изменении ширины вьюпорта, а галочки и соответствующие им вертикальные линии отображаются именно на том месте, где они должны быть.

Вот полный рабочий пример http://jsfiddle.net/AlexLukin/0ra43td5/48/

Источник
Другие вопросы по тегам