使用 iframe 嵌入 D3.js

Question

I'm trying to create an iframe from JavaScript and embed D3 with in the iframe.like this

    var iDiv = document.createElement('div');
    iDiv.id = 'block';
    document.getElementsByTagName('body')[0].appendChild(iDiv);
    var target = document.getElementById("pp12");     

    var container=d3.select("#block").append("svg")
                  .attr("width", 200)
                  .attr("height", 200)
                  .style("border", "1px solid black");

    var iframe = document.createElement('iframe');
    iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(iDiv);
    document.body.appendChild(iframe);
    console.log('iframe.contentWindow =', iframe.contentWindow);
    target.appendChild(iframe);

But i couldn't do. kindly help me.

Answer 1

Ok... Do it this way

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(iDiv.outerHTML);

fiddel : http://jsfiddle.net/cyril123/8xr8ub8s/1/