在新窗口中使用d3.js [英] use d3.js on a a new window
问题描述
打开新窗口时是否可以使用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 （th）
.text（function（column）{console.log（column）; return column;}）;
它不工作，第一个console.log的输出是
[
Array [1]
0：null
length：1
parentNode：HTMLHtmlElement
__proto__：Array [0]
]
<
这里有一些问题：
-
我认为您未正确打开新窗口 - 一般来说，您可以打开包含内容的网址，也可以使用
作为URL，并将您的内容写入空白窗口。打开usertable.html的网址，然后撰写< html>< body>感。最后，即使有一个空白的窗口，你不需要写< html>< body>- 浏览器一般会默认提供这些节点。 > -
默认情况下，在当前文档中使用
d3.select。为了访问新打开的窗口的正文，您需要传入new_window.document- 实际上，您需要传入new_window.document.body，因为您不能向文档中附加任何文档而不使用HIERARCHY_REQUEST_ERROR。 -
我也不认为将D3与
document.write你在这里做。 D3选择DOM中的节点，以及你现在有代码的方式，我不认为你的表实际上是一个良好形成的节点，直到你试图选择它。
将所有这些结合在一起会得到这样的结果：
var newWindow = window.open（''）;
var newWindowRoot = d3.select（newWindow.document.body）;
//现在用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'）;
cell.text（function（d）{return d.value;}）;
工作范例： http://jsfiddle.net/nrabinowitz/gQf7J/
Is it possibile 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.
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.selectis 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 todocumentwithout aHIERARCHY_REQUEST_ERROR.I also don't think it's a good idea to mix D3 with
document.writeas you're doing here. D3 selects nodes in the DOM, and the way you have the code now, I don't think yourtableis 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/
这篇关于在新窗口中使用d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
