求助：使用dagre-d3在新标签页渲染SVG图形显示空白

嘿，我看了你的代码，发现问题出在处理新窗口内容的方式上——你把完整的HTML字符串当成<script>标签的src属性值了，这完全不对哦！src是用来加载外部脚本文件的，不是直接塞HTML内容的。而且你后面代码里还有个没定义的element变量，这也会导致报错，让新标签页没法正常渲染内容。

下面给你修正后的完整方案：

第一步：整理新标签页的HTML内容 #

先把要在新标签页展示的完整HTML写好，注意转义和拼写（比如你之前把compound写成了compund，字体sans-serif写成sans-serf，这些小错误也会影响渲染）：

const htmlContent = `
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Graph</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
    <style>
        .clusters rect {
            fill: #00ffd0;
            stroke: #999;
            stroke-width: 1.5px;
        }
        text {
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
        }
        .node rect {
            stroke: #999;
            fill: #fff;
            stroke-width: 1.5px;
        }
        .edgePath path {
            stroke: #333;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
    <svg id="svg-canvas" width="400" height="600"></svg>
    <script>
        // 初始化dagre-d3图形
        var graph = new dagreD3.graphlib.Graph({compound:true})
            .setGraph({})
            .setDefaultEdgeLabel(function() { return {}; });

        graph.setNode('1', {label: 'hi'});
        graph.setNode('2', {label: 'hello'});
        graph.setEdge('2', '1');
        graph.setEdge('1', '2');

        var render = new dagreD3.render();
        var svg = d3.select("#svg-canvas"),
            svgGroup = svg.append("g");

        render(d3.select("svg g"), graph);

        // 可选：让SVG自适应内容大小，避免留白或内容溢出
        var svgBounds = svgGroup.node().getBBox();
        svg.attr("width", svgBounds.width + 40)
           .attr("height", svgBounds.height + 40);
        svgGroup.attr("transform", "translate(20,20)");
    </script>
</body>
</html>
`;

第二步：打开新标签页并写入内容 #

接下来是打开新标签页的代码，直接把完整HTML写入新窗口的文档，这才是正确的姿势：

// 打开空白新标签页
const newWin = window.open('', '_blank');
if (newWin) {
    // 把完整HTML内容写入新窗口
    newWin.document.write(htmlContent);
    // 关闭文档流，确保浏览器开始渲染内容
    newWin.document.close();
} else {
    alert("浏览器阻止了新标签页弹出，请检查弹窗权限设置！");
}

关键修正点说明 #

• 放弃用script.src传递HTML的错误方式，改用document.write()直接写入完整页面内容，这是嵌入整个HTML到新窗口的正确方法。
• 修复了拼写错误：compund→compound，sans-serf→sans-serif，这些小细节会影响样式和功能。
• 增加了SVG自适应大小的代码，让图形能完美适配画布，不会出现内容被截断或者大片留白的情况。
• 添加了弹窗被阻止的提示，避免用户不知道为什么没弹出新标签页。

把这两段代码放在同一个HTML文件的<script>标签里运行，新标签页就能正确渲染出你要的dagre-d3图形啦！

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