Javascript中结合Tableau API与Scrollama实现固定侧边展示Tableau图表问询

核心修改逻辑 #

你当前的问题根源是Tableau的挂载节点预设在文本区域的HTML结构中，只要改为在drawimages函数中动态向Scrollama指定的固定图表容器#graphs创建挂载节点即可，具体修改如下：

1. 调整全局变量声明与drawimages函数

// 提前在全局作用域声明viz变量，用于后续实例销毁
let viz = null;

function drawimages({width, height, data}) {
    // 销毁已存在的Tableau实例，避免重复渲染
    if (viz) {
        viz.dispose();
        viz = null;
    }
    // 取Scrollama指定的固定图表容器
    const graphContainer = document.getElementById('graphs');
    // 清空容器原有内容
    graphContainer.innerHTML = '';
    // 动态创建Tableau挂载节点
    const tableauPlaceholder = document.createElement('div');
    tableauPlaceholder.id = 'tableauViz';
    tableauPlaceholder.style.width = `${width}px`;
    tableauPlaceholder.style.height = `${height}px`;
    // 将挂载节点插入固定图表容器
    graphContainer.appendChild(tableauPlaceholder);

    const url = "https://public.tableau.com/views/Covid19NYCExpenditures/Dashboard1";
    const options = {
        hideTabs: true,
        hideToolbar: true,
        onFirstInteraction: function () {
            console.log("My embbed");
            const workbook = viz.getWorkbook();
            const activeSheet = workbook.getActiveSheet();
        }
    };
    viz = new tableau.Viz(tableauPlaceholder, url, options);
}

2. 调整step切换时的清理逻辑

修改onStepEnter回调中的setTimeout部分，兼容Tableau实例的销毁：

setTimeout(() => {
    // 销毁存在的Tableau实例
    if (viz) {
        viz.dispose();
        viz = null;
    }
    // 清空固定容器所有内容，移除原有svg和tooltip
    d3.select("#graphs").html('');
    d3.select(".d3-tip").remove();

    // 非Tableau的step继续创建svg
    const svg = d3.select('#graphs')
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .style("overflow", "visible")
      .style("display", "block");

    switch (element.dataset.step) {
      case '1':
        drawimages({width, height, data});
        break;
      // 剩余其他case保持原有逻辑不变
      case '2':
        drawimages2({svg, width, height, data});
        break;
      case '3':
        drawimages3({svg, width, height, data});
        break;
      case '4':
        drawLineChart({svg, width, height, data});
        break;
      case '5':
        drawDonutChart({svg, width, height, data});
        break;
      case '6':
        drawimages4({svg, width, height, data});
        break;
      case '7':
        drawBarChartMia2({svg, width, height, data});
        break;
    }
}, 500)

3. 清理原有HTML结构

删掉你之前写在文本区域HTML中的id="tableauViz"元素，避免节点冲突。

修改完成后Tableau图表就会直接渲染在Scrollama对应的固定图表区域，不会出现在文本侧。

内容的提问来源于stack exchange，提问作者Elmer