Rendering SVG in new tab opened with HTML

Question

I'm using the library dagre-d3 to render a graph as an SVG. Basically, I need to render such an SVG within a newly opened tab, so that when this script is ran, it opens a new tab that displays the SVG rendered by dagre-d3.

I've already tried using an onLoad statement.

This is the type of script I want to run in a newly opened tab:

<!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>`;

This is my attempt at writing a script that opens a new tab and executes a script that renders an SVG using dagre-d3 (this would be in the same html file right after the above code):

    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>

The expected result is a rendered SVG in a new tab browser tab, but currently the newly opened tab is blank.

I am not very experienced with front end work, so I'd appreciate any help!

Rendering SVG in new tab opened with HTML

0 Answers0