Question

我目前正在使用d3.js处理图形应用程序。以下是d3强制有向图的链接： https://bl.ocks.org/mbostock/4062045 如果我为节点创建一个点击事件，如：

node.on("click", function(d){
           console.log(d.id);
                         });

这甚至会在浏览器的开发人员工具的控制台中打印节点的名称。但是我需要在html页面（一个小部件）中创建一个窗口，该窗口将获取此值并在单击节点时打印它。

有没有办法在html窗口小部件（只是另一个div）上打印控制台输出？

P.S。有一个类似的问题：如何使用TextArea制作输出控制台？但答案是确定阈值而不是如何创建阈值。

帮助表示赞赏。

Answer 1

尝试通过javascript打开一个新窗口。

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write(d.id);

Answer 2

如果您想直接修改页面，可以在javascript中使用：

document.getElementById();

您可以在here

上看到很多不同的选择器

然后修改HTML，你只需这样做：

document.getElementById("example").innerHTML = "test";

PS：如果你使用jquery，你可以使用像这样的$函数来做同样的事情：

$("#example").html("test");

它使用css选择器，所以＃表示id。

Answer 3

像lynko说你可以覆盖console.log：

console.log = function (message) {
    //prettify message here
    $("#console_out_div").append("<p>" + message + "</p>");
};

console.log("test123");
console.log([1,3,4]);
console.log({a:"test", b: 2});

您只需检查instanceof和typeof变量message并美化输出。这样的事情fiddle。

Answer 4

这很麻烦，但你可以在脚本的顶部写上console.log = customLogFunc;。

使用javascript在HTML上的输出窗口中打印控制台消息

4 个答案: