nvd3 ошибка диаграммы при отображении: нет

Question

В настоящее время я использую nvd3 для создания диаграмм в своем приложении. У меня есть проблема в том, что если div скрыт с помощью display:none до того, как графики будут визуализированы, диаграммы будут вызывать ошибку, а при «скрытии» div я должен щелкнуть по диаграммам, чтобы заставить их правильно отобразить. Есть ли способ предварительного рендеринга диаграмм, даже если div скрыт? Я попытался установить ширину и высоту родительского svg перед вызовом диаграммы, но безрезультатно.

nv.addGraph(function() { 
    //chart setup code 

    d3.select("#chart svg").attr("width", 300).attr("height", 500); 
    d3.select("#chart svg").datum(data).transition().duration(500).call(chart); 

    nv.utils.windowResize(chart.update); 
    return chart; 
}); 

Answer 1

Вы можете скрыть график - но все-таки делают график - используя класс как это:

.out-of-sight-and-space{ 
    visibility: hidden !important; 
    position: absolute !important; 
    top: 0 !important; 
} 

Вы должны применить это к родителю SVG, в вашем случае #chart. Когда вы хотите показать диаграмму, удалите класс.

Answer 2

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

NVD3 Charts not rendering correctly in hidden tab

Это решение также зависит от того, с помощью JS, чтобы отобразить скрытое содержание и в то же время инициирует событие изменения размера, которое заставляет NVD3 изменять размер видимой диаграммы, чтобы заполнить родительский элемент. В моем случае я не заботился о SEO, поэтому я использовал display: none; но видимость: скрытая; тоже будет работать.

Answer 3

Просто добавьте JavaScript:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    window.dispatchEvent(new Event('resize')); 
}) 

hidden.bs.tab это событие, которое срабатывает после новой вкладки отображается в соответствии с Документами Bootstrap. Этот код запускает событие изменения размера после изменения каждой вкладки.