d3.js和document.onReady

Question

我刚刚开始使用d3.js并且有一个细节完全让我不知所措:如何在DOM准备接收输入后才能执行我的代码？

当然,我可以使用类似jQuery的东西,但这似乎过分了.

在我遇到的每个d3.js示例中,似乎没有特殊document.onReady()类型的例程,但所有示例都可以完美地工作.然而,当我在我的头端测试代码时,如果在DOM准备好之前执行代码完全失败(将我的代码抛入window.onload确认中).

是什么赋予了？

Answer 1

您将在他们的示例中注意到,他们的javascript低于任何使用的html元素,因此在开始执行javascript之前会加载dom的一部分.

简单地将你的javascript放在身体的底部通常就足够了.

Answer 2

有时您不能依赖DIV/HTML元素放置,例如当您需要将D3动态操作的元素插入到文档中时.在这种情况下,一种解决方案是监视文档的DOMNodeInserted事件,并在回调中插入D3代码(我相信这排除了9之前的IE版本).这是jQuery的一个例子:

$(document).bind('DOMNodeInserted', function(event)
{
    if (event.target.id == "viz")
    {
        var sampleSVG = d3.select("#viz")
                 .append("svg:svg")
                 .attr("width", 100)
                 .attr("height", 100);    

        sampleSVG.append("svg:circle")
                 .style("stroke", "gray")
                 .style("fill", "white")
                 .attr("r", 40)
                 .attr("cx", 50)
                 .attr("cy", 50)
                 .on("mouseover", function() {
                      d3.select(this).style("fill", "aliceblue");
                 })
                 .on("mouseout", function() {
                      d3.select(this).style("fill", "white");}
                 );
    }
});