Skip to content Skip to sidebar Skip to footer
Home / Console / D3.js / Html Table / Javascript / Window

Use D3.js On A New Window

Post a Comment
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(''); ne

Solution 1:

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/


Post a Comment for "Use D3.js On A New Window"