Как использовать intro.js для элементов d3.js

Question

Я использую d3.js для генерации графа Санки, и я использую intro.js для экскурсии по странице. Intro.js работает на всех моих страницах, кроме графиков d3. Например, я также использую intro.js для ознакомления с другими элементами, которые также динамически генерируются библиотекой js DataTables, и она отлично работает.

Мой код для тура DataTables:

document.getElementById('help').onclick = function (){
  var intro = introJs();
    intro.setOptions({
      steps: [
        { 
          intro: "These are the results of your search."
        },
        {
          element: "[name=DataTables_Table_0_length]",
          intro: "Select how many results to view.",
          position: "right"
        },
        {
          element: "[type=search][aria-controls=DataTables_Table_0]",
          intro: 'Here you can search the table.',
          position: 'left'
        },
        {
          element: "[class=ColVis]",
          intro: "To show or hide columns, use this.",
          position: "left"
        },
        {
          element: "[class=DTTT_container]",
          intro: "Use these buttons to download, print or copy the data in the     table.",
          position: "left"
        },
        {
          intro: "Select an NPI to view its homepage and we'll continue from there."
        }
      ],
      'showBullets': true,
      'skipLabel': 'Let me drive',
      'doneLabel': "Try it out"
    });

intro.start();
};

Все эти элементы генерируются динамически, но распознаются intro.js при вызове.

Однако, когда я пытаюсь сделать то же самое с элементами d3, intro.js не может их найти.

document.getElementById('help').onclick = function (){
  var intro = introJs();
    intro.setOptions({
      steps: [
        { 
          intro: "These are the results of your search."
        },
        {
          element: "[class=legend-items]",
          intro: "This is the legend.",
          position: "right"
        }
      ],
      'showBullets': true,
      'skipLabel': 'Let me drive',
      'doneLabel': "Try it out"
    });

    intro.start();
};

Вот скриншот моего графика d3:

Кто-нибудь сталкивался с этой проблемой и может пролить свет на меня?

Благодаря тонну.

Answer 1

Этот вопрос все еще остается открытым в репозитории intro.js: https://github.com/usablica/intro.js/issues/66