Rug*_*rra 1 javascript console html-table window d3.js
打开新窗口时是否可以使用d3.js？例如,我正在尝试:
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; });
它不起作用,第一个console.log的输出是
[
Array[1]
0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]
]
我觉得0: null不好.
这里有一些问题:
我认为您正在错误地打开新窗口 - 通常,您要么打开包含内容的URL,要么将其""用作URL并将内容写入空白窗口.打开像"usertable.html"然后写的URL <html><body>是没有意义的.最后,即使使用空白窗口,您也不需要编写<html><body>- 浏览器通常会默认提供这些节点.
d3.select默认情况下,使用将在当前文档中查找.为了访问新打开的窗口的身体,你需要传递new_window.document-事实上,你需要传递new_window.document.body,因为你不能添加任何东西document没有HIERARCHY_REQUEST_ERROR.
我也不认为将D3与document.write你在这里混合是一个好主意.D3选择DOM中的节点,以及现在拥有代码的方式,table在您尝试选择它之前,我认为您实际上并不是一个格式良好的节点.D3非常适合插入新的DOM节点 - 而是使用它.
把所有这些放在一起产生这样的东西:
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; });
工作示例:http://jsfiddle.net/nrabinowitz/gQf7J/