我使用 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();
};
有人遇到过这个问题并且可以为我提供一些线索吗?
非常感谢。
最佳答案
这仍然是 intro.js 存储库上的一个未决问题:https://github.com/usablica/intro.js/issues/66
关于javascript - 如何在 d3.js 元素上使用 intro.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32054433/