Use D3.js On A New Window
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 innew_window.document
- in fact, you'll need to pass innew_window.document.body
, since you can't append anything todocument
without aHIERARCHY_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 yourtable
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 D3vardata = [
{ 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"