1

新しいウィンドウを開くときに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。

4

1 に答える 1

7

ここにはいくつかの問題があります。

  • 新しいウィンドウを間違って開いていると思います。通常、コンテンツを含む URL を開くか、URL""として を使用して空白のウィンドウにコンテンツを書き込みます。のように URL を開いて"usertable.html"から書き込むの<html><body>は意味がありません。最後に、空白のウィンドウでも、書き込む必要はありません<html><body>。通常、ブラウザはデフォルトでこれらのノードを提供します。

  • Usingd3.selectは、デフォルトで現在のドキュメントを検索します。新しく開いたウィンドウの本体にアクセスするには、 を渡すnew_window.document必要があります。実際には、 を渡す必要がありnew_window.document.bodyます。documentHIERARCHY_REQUEST_ERROR

  • document.writeまた、ここで行っているようにD3 を混在させるのは良い考えではないと思います。tableD3 は DOM 内のノードを選択します。現在のコードの方法では、選択しようとするまで、実際には整形式のノードではないと思います。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/

于 2012-09-11T21:07:38.937 に答える