2

我正在使用库dagre-d3将图形呈现为 SVG。基本上，我需要在新打开的选项卡中呈现这样的 SVG，以便在运行此脚本时，它会打开一个新选项卡，显示由 dagre-d3 呈现的 SVG。

我已经尝试过使用 onLoad 语句。

这是我想在新打开的选项卡中运行的脚本类型：

<!doctype html>
<script id="js">
  var html = `<meta charset="utf-8">
<title>Graph<\/title>

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"><\/script>
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js"><\/script>

<style id="css">

.clusters rect {
  fill: #00ffd0;
  stroke: #999;
  stroke-width: 1.5px;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node rect {
  stroke: #999;
  fill: #fff;
  stroke-width: 1.5px;
}

.edgePath path {
  stroke: #333;
  stroke-width: 1.5px;
}
<\/style>

<svg id="svg-canvas" width=400 height=600><\/svg>

<script id="js">
  var graph = new dagreD3.graphlib.Graph({compund: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"),
    svgGroup = svg.append("g");

  render(d3.select("svg g"), graph);
<\/script>`;

这是我尝试编写一个脚本来打开一个新选项卡并执行一个使用 dagre-d3 呈现 SVG 的脚本（这将在上述代码之后的同一个 html 文件中）：

    var win = window.open('');
    var script = document.createElement('script');
    script.src = html;//where html is the above script
    win.document.body.appendChild(script);
    win.test = function () {
        win.alert("Starting magic...");

    }
    win.test();
    setTimeout(function () {
        win.document.body.appendChild(element);
        console.log('New script appended!')
    }, 10000);

</script>

预期结果是在新选项卡浏览器选项卡中呈现 SVG，但当前新打开的选项卡是空白的。

我对前端工作不是很有经验，所以我很感激任何帮助！

4

0 回答 0