javascript - 如何在 d3.js 元素上使用 intro.js

标签 javascript d3.js intro.js

我使用 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 图的屏幕截图: enter image description here

有人遇到过这个问题并且可以为我提供一些线索吗?

非常感谢。

最佳答案

这仍然是 intro.js 存储库上的一个未决问题:https://github.com/usablica/intro.js/issues/66

关于javascript - 如何在 d3.js 元素上使用 intro.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32054433/

相关文章:

javascript - 长轮询 - jquery + php

android - 在 react-native 中渲染图表

javascript - 如何在数据表行和列中采用 intro.js 的流程?

javascript - 使用 intro.js 提示修复 div(模态)中的滚动问题

javascript - 我可以使用超过 2 个页面的多个 intro.js 吗?

javascript - Highcharts:无论我设置 formatter:function() 或设置 tooltip{enabled:false} ,都不会发生任何变化

javascript - HTML 输入自动填充占位符

javascript - 如何停止使用 onload() 函数以避免页面刷新时丢失 PHP 输出?

javascript - 如何在平行坐标可视化中为每个垂直轴设置标签?

javascript - 在 D3.js 中使用时间刻度时,x(i) 返回错误值