d3.js 和 document.onReady

发布于 2024-12-01 05:44:22 字数 424 浏览 2 评论 0原文

我刚刚开始使用 d3.js ，有一个细节完全让我困惑：如何我是否只在 DOM 准备好接收输入后才执行代码？

当然，我可以使用 jQuery 之类的东西，但这似乎有点过分了。

在我遇到的每个 d3.js 示例中似乎没有什么特别的< code>document.onReady() 类型的例程，但所有示例都可以完美运行。然而，当我测试代码时，如果在 DOM 准备好之前执行，代码将完全失败（将我的代码放入 window.onload 中证实了这一点）。

什么给？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

熊抱啵儿 2024-12-08 05:44:22

您会在他们的示例中注意到，他们的 javascript 位于所使用的任何 html 元素下方，以便在开始执行 javascript 之前加载 dom 的一部分。

只需将 javascript 放在正文的底部通常就足够了。

回复收藏 0 原文

浮光之海 2024-12-08 05:44:22

有时您不能依赖 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");}
                 );
    }
});

Sometimes you can't rely on the DIV / HTML element placing, for instance when you need to insert the element manipulated with D3 dynamically into the document. In such situations one solution is to monitor the document for DOMNodeInserted events and insert the D3 code in a callback (I believe this rules out IE versions prior to 9 though). Here's an example with 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");}
                 );
    }
});

回复收藏 0 原文

终难遇 2024-12-08 05:44:22

标记为正确的答案对我不起作用，实际上是错误的。这是某种黑客行为，不应被视为正确答案。同样，您可以在 setTimeout(function() { .. }, 1000) 内执行代码。它更加可靠，因为您可以设置延迟:-/

在我的例子中，我需要等待所有元素被处理才能知道它们的实际尺寸。当它们没有被建造、加工和完成时，数字就不正确。

更新。这是正确的答案：

很可能您使用诸如 d3.json() 之类的异步调用来获取构建 DOM 的数据，这就是为什么它需要一些时间。由于异步调用是非阻塞的，因此即使在异步调用完成之前，您的后续代码也会被调用，从而导致问题，这就是您发布此问题的原因。

因此，您尝试通过在 D3 或其他任何地方查找某些内容来解决此问题，这会告诉您 D3 异步调用已完成，现在您可以执行下一步操作。有些人建议进行同步 ajax 调用。这是非常错误的。异步调用被创建为异步的。

你真正需要做的是改变你的范式。只需将回调传递给该异步调用即可！类似的东西：

function thingsToDoWhenDOMisBuilt() {
    ...
}

function buildDOM(rootNode, error, thingsToDoWhenDOMisBuilt) {
    ...
    // everything is built, so we can do our post-build thing against DOM
    if (thingsToDoWhenDOMisBuilt)
        thingsToDoWhenDOMisBuilt()
}

d3.json(urlToData, buildDOM) {
    if (error)
        console.log("oops")
    buildDOM(rootNode, thingsToDoWhenDOMisBuilt)
}

另外，看看 async.js

上面建议的绑定事件也是一个可怕的想法。您应该使用 .enter() .exit() 代替。 D3 是数据驱动的，如果您需要事件驱动的流程，那么只需使用 jQuery 或 vanilla JS！

The answer marked as correct didn't work for me, and is actually wrong. It's some kind of a hack and should not be considered as a correct answer. Same way you could just execute your code inside setTimeout(function() { .. }, 1000). It is even more reliable as you can set the delay :-/

In my case I needed to wait for all elements to be processed in order to know their actual dimensions. When they are not built, processed and done, the numbers were not correct.

UPDATED. Here is the correct answer:

Most probably you get your data for building DOM using some async call like d3.json() and that's why it takes some time. As async call is non-blocking, then your subsequent code gets invoked even before the async call finishes, causing problems, and this is the reason why you posted this question.

So you are trying to solve this by looking for something in D3 or anywhere else, that would tell you that D3 async call is finished and now you can do your next thing. Some people suggest making sync ajax call. This is awfully WRONG. Async calls are created to be async.

What you actually need to do is to change your paradigm. Just pass a callback to that async call and that's it! Something like that:

function thingsToDoWhenDOMisBuilt() {
    ...
}

function buildDOM(rootNode, error, thingsToDoWhenDOMisBuilt) {
    ...
    // everything is built, so we can do our post-build thing against DOM
    if (thingsToDoWhenDOMisBuilt)
        thingsToDoWhenDOMisBuilt()
}

d3.json(urlToData, buildDOM) {
    if (error)
        console.log("oops")
    buildDOM(rootNode, thingsToDoWhenDOMisBuilt)
}

Also, take a look at async.js

Binding events as suggested above is also a horrible idea. You should use .enter() .exit() instead. D3 is Data driven, if you need event-driven flow, then just use jQuery or vanilla JS!

回复收藏 0 原文

浴红衣 2024-12-08 05:44:22

您可以将 onload 事件放在 body 中，并将所有 d3js 代码放在一个函数中。例如：

<body onload="yourFunctionName()">

在您的 javascript 中，插入以下内容：

function yourFunctionName() {
    //Your d3js code goes here
}

只需将完整的 d3 示例代码粘贴到该函数中即可。 onload 事件将在 DOM 准备好后发生。

You can put an onload event at body and put all d3js code in a function. For example:

<body onload="yourFunctionName()">

And in your javascript, insert this:

function yourFunctionName() {
    //Your d3js code goes here
}

Just paste the full d3 example code inside this function. The onload event will happen after the DOM is ready.

回复收藏 0 原文

~没有更多了~

关于作者

温柔少女心

暂无简介

0 文章

0 评论

668 人气

关注发私信

友情链接

文江博客

d3.js 和 document.onReady

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

d3.js 和 document.onReady

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。