Перерисовка данных диаграммы nvd3.js ajax - отсутствует эффект наведения + прежняя шкала yAxis

Я использую nvd3 для рисования простой линейной диаграммы с получением данных через запрос ajax. Он отлично работает с первым запросом на отрисовку, но не на перерисовку. Диаграмма перерисовывается, вызывая ту же функцию рисования, но с другими данными + разными максимальными/минимальными значениями.

При перерисовке диаграммы с новыми данными «круг наведения» не появляется, а появляется всплывающая подсказка. Кроме того, при нажатии на легенду диаграммы и принудительной перерисовке снова появляется наведение, но значения оси y изменяются на значения первой нарисованной диаграммы.

До сих пор я предполагаю, что при перерисовке диаграммы все еще сохраняются старые значения max/min, но только в отношении эффекта «зависания». Общий график пока выглядит нормально и на перерисовке - проблема только в ховере и все.

Звучит довольно запутанно, но, надеюсь, вы поняли суть.

Некоторый код:

 d3.json(queryurl, function(data2){
  nv.addGraph(function(jsonData) {
    if(chart){
       chart.remove();
    }
    chart = nv.models.lineChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(d3.scale.category10().range());

    chart.xAxis
        .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d)) 
        });

    chart.yAxis
        .scale()
        .tickFormat(d3.format(''));

    chart.lines.yDomain([maxmin.max,maxmin.min]);

    d3.select('#chart1 #chartsvg')
      .datum(data2)
      .transition().duration(600)
      .call(chart);

    nv.utils.windowResize(chart.update);

});

});
  return chart;}

ajax d3.js hover redraw nvd3.js
person helmson    schedule 21.11.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте использовать .empty() для элемента svg перед перерисовкой.

person Gerard    schedule 26.04.2013

arrow_upward
3
arrow_downward

Я только начал работать с NVD3 и D3, но делаю то же самое. Что сработало для меня, так это разделить функцию обновления данных с функцией создания диаграммы. Однако обратите внимание на предостережение ниже...

У меня есть следующее для создания графика:

initGraph = function(url) {
  d3.json(url, function(data) {
    nv.addGraph(function() {
      chart = nv.models.multiBarChart();

      d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
      nv.utils.windowResize(chart.update);

      return chart;
    });
  });
};

И следующая функция для его обновления:

redrawGraph = function(url) {
  d3.json(url, function(data) {

    d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
  });
};

Я не знаю, является ли это рекомендуемым решением, поскольку я все еще нахожусь на стадии «взломать, пока не заработает». При этом после вызова redrawGraph() работают все функции графика (включая перерисовку осей и всплывающие подсказки).

Предупреждение: это иногда приводит к неправильному расчету тиков при пересчете: Поддельные тики

person nullPainter    schedule 26.01.2013
comment
См. мой обходной путь для проблемы с тиками - по сути, перерисовка диаграммы. - person nullPainter; 22.04.2013