Home/ Questions/Q 8542011
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:57:40+00:00

Is it possible to use d3.js when opening new windows? For example, I am

  • 0

Is it possible to use d3.js when opening new windows? For example, I am trying:

new_window = window.open("userpage.html");
new_window.document.write("<html><body>");
new_window.document.write("<table id=\"usertable\">");
new_window.document.write("</table>");
new_window.document.write("</body></html>");    
table = d3.select("#usertable");
console.log(table);
var thead = table.append("thead");
var tbody = table.append("tbody");
var columns = ["dataset"];

thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(column) { console.log(column); return column; });

It doesn’t work and the ouput of the first console.log is

[
Array[1]
0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]
]

I think 0: null is not good.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a few issues here:

    • I think you’re opening the new window incorrectly – generally, you either open a URL with content, or you use "" as the URL and write your content into a blank window. Opening a URL like "usertable.html" and then writing <html><body> doesn’t make sense. Finally, even with a blank window, you don’t need to write <html><body> – the browser will generally provide these nodes by default.

    • Using d3.select is going to look, by default, in the current document. In order to access the body of the newly opened window, you’ll need to pass in new_window.document – in fact, you’ll need to pass in new_window.document.body, since you can’t append anything to document without a HIERARCHY_REQUEST_ERROR.

    • I also don’t think it’s a good idea to mix D3 with document.write as you’re doing here. D3 selects nodes in the DOM, and the way you have the code now, I don’t think your table is actually a well-formed node until after you’ve tried to select it. D3 is perfectly good at inserting new DOM nodes – use it instead.

    Putting all this together yields something like this:

    var newWindow = window.open('');

var newWindowRoot = d3.select(newWindow.document.body);

// now do some writing with D3
var data = [
    { foo: "Foo 1", bar: "Bar 1" },
    { foo: "Foo 2", bar: "Bar 2" }
];

var table = newWindowRoot.append('table');

var rows = table.selectAll('tr')
    .data(data);

rows.enter().append('tr');

var cells = rows.selectAll('td')
    .data(function(d) { return d3.entries(d); });

cells.enter().append('td');

cells.text(function(d) { return d.value; });

    Working example: http://jsfiddle.net/nrabinowitz/gQf7J/

    • 0