Не строится график внутри табов

[Krasi]

Пробовал и с Гугл-чартами, и с Britecharts.
1. По такому скрипту работают вкладки.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        
        <script type="text/javascript">
        $(document).ready(function() {
        	$("#content div").hide(); // Скрываем содержание
        	$("#tabs li:first").attr("id","current"); // Активируем первую закладку
        	$("#content div:first").fadeIn(); // Выводим содержание
            
            $('#tabs a').click(function(e) {
                e.preventDefault();        
                $("#content div").hide(); //Скрыть все сожержание
                $("#tabs li").attr("id",""); //Сброс ID
                $(this).parent().attr("id","current"); // Активируем закладку
                $('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
            });
        });
        </script>

Вот так строится график

<div class="bar-container"></div>
        
         <script>
            // Instantiate bar chart and container
            const barChart = britecharts.bar();
            const container = d3.select('.bar-container');
        
            // Create Dataset with proper shape
            const barData = [
                { name: 'Luminous', value: 2 },
                { name: 'Glittering', value: 5 },
                { name: 'Intense', value: 4 },
                { name: 'Radiant', value: 3 }
            ];
        
            // Configure chart
            barChart
                .margin({left: 100})
                .isHorizontal(true)
                .height(400)
                .width(600);
        
            container.datum(barData).call(barChart);
        </script>

Если я помещаю код для построения графика просто перед </body>, он отлично рисуется.
Но если он находится внутри табы, то график не строится.

<ul id="tabs">
    <li><a href="#" title="tab1">Мейкер</a></li>
    <li><a href="#" title="tab2">Статистика</a></li>
    <li><a href="#" title="tab3">Заказы</a></li>
    <li><a href="#" title="tab4">Все проекты</a></li> 
    <li><a href="#" title="tab5">Пятая вкладка</a></li>
</ul>
 
<div id="content">
    <div id="tab1"><table>
            <tr>
                <td>Мультизадачность</td><td>100</td>
            </tr>
            <tr>
                <td>Скорость</td><td>50</td>
            </tr>
            <tr>
                <td>Сложность</td><td>200</td>
            </tr>
            <tr>
                <td>Дизайн</td><td>100</td>
            </tr>
        </table></div>
    <div id="tab2">
             ТО ЕСТЬ КОГДА КОД ГРАФИКА ПОМЕЩАЮ СЮДА
    </div>

Я подебажил, фишка в том, что у элемента графика остается свойство hiden.
111.png
Убираю его из дома - все ок, график строится. Как исправить?

[ADSoft]

а вот этот блок

<div class="bar-container"></div>

надеюсь он внутри <div id="tab2"> ?

Если в инспекторе display : none поменять на block - тогда нормально все?
попробуйте код размесить где то в песочнице - и дате ссылку на нее типа jsfiddle

[Krasi]

Он в той вкладке, в которой и js графика! Пусть это будет tab3, в общем. Все помещено в tab3, тем более, что сама таба то не хайден, спрятан только div графика в итоге. То есть дело, скорее всего, в каком-то несовершенстве jQuery и строки

$('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки.

Идеи? Кстати, поменял div на ul - все заработало. Просто может поможете разобраться, что за ерунда с div?

[ADSoft]

Попробуйте после $('#' + $(this).attr('title')).....
Добавить

$('#' + $(this).attr('title')).children('div.bar-container').css('display', 'block');

Скорее всего скрипт графика смотрит, не в невидимой ли он диске находится, и если так стает невидимым сам.. . А потом не переключается..