Javascript 在用HTML打开的新选项卡中呈现SVG_Javascript_Html_Css_Svg_Dagre D3

Javascript 在用HTML打开的新选项卡中呈现SVG

javascript html css svg

Javascript 在用HTML打开的新选项卡中呈现SVG,javascript,html,css,svg,dagre-d3,Javascript,Html,Css,Svg,Dagre D3,我正在使用该库将图形渲染为SVG。基本上，我需要在一个新打开的选项卡中呈现这样一个SVG，这样当这个脚本运行时，它会打开一个新选项卡，显示由dagre-d3呈现的SVG 我已经尝试过使用onLoad语句这是我希望在新打开的选项卡中运行的脚本类型： <!doctype html> <script id="js"> var html = `<meta charset="utf-8"> <title>Graph<\/title> &l

我正在使用该库将图形渲染为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>`;


变量html=`
图表
.群集矩形{
填充：#00ffd0；
行程：#999；
笔划宽度：1.5px；
}
正文{
字体大小：300；
字体系列：“Helvetica Neue”，Helvetica，Arial，无serf；
字体大小：14px；
}
.node rect{
行程：#999；
填充：#fff；
笔划宽度：1.5px；
}
(一)边路{
冲程：#333；
笔划宽度：1.5px；
}
var-graph=new dagreD3.graphlib.graph（{compund:true}）
.setGraph（{}）
.setDefaultEdgeLabel（函数（）{return{}；}）；
setNode（'1'，{label:'hi'}）；
setNode（'2'，{label:'hello'}）；
图.setEdge（'2'，'1'）；
图.setEdge（'1'，'2'）；
var render=new dagreD3.render（）；
var svg=d3。选择（“svg”），
svgGroup=svg.append（“g”）；
渲染（d3.选择（“svg”），图形）；
`;

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

var-win=window.open（“”）；
var script=document.createElement（'script'）；
script.src=html//其中html是上面的脚本
win.document.body.appendChild（脚本）；
win.test=函数（）{
win.alert（“启动魔法…”）；
}
win.test（）；
setTimeout（函数（）{
win.document.body.appendChild（元素）；
console.log（'追加了新脚本！'）
}, 10000);

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

我不是很有经验的前端工作，所以我会感谢任何帮助

    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>