Javascript 如何选择D3中现有的SVG容器而不使用D3创建该容器？

这是一个更能满足我自己好奇心的问题。我想知道如何使用d3选择已经存在于HTML文档主体中的SVG元素，而不首先使用d3创建SVG元素。我希望下面的代码片段能起作用，但它并没有起作用，这让我感到相当沮丧

//如果将下面的选项更改为“附加”，而不是“选择”，则该选项有效
//但是如果我不想使用d3创建SVG呢
var svg=d3.选择（“主体”）.选择（“svg”）
var circle=svg.append（“circle”）
.attr（“cx”，50）
.attr（“cy”，50）
.attr（“r”，20）

所以这是一个典型的JavaScript问题。它无法工作，因为页面元素尚未完成加载。解决方法是将d3代码从头部移动到结束体标记之前

//如果将下面的选项更改为“附加”，而不是“选择”，则该选项有效
//但是如果我不想使用d3创建SVG呢
var svg=d3.选择（“主体”）.选择（“svg”）；
var circle=svg.append（“circle”）
.attr（“cx”，50）
.attr（“cy”，50）
.attr（“r”，20）
.风格（“颜色”、“绿色”）；

要绝对确定，请听

DOMContentLoaded

like

document.addEventListener('DOMContentLoaded', function(){
    init();
})

function init(){
    var svg = d3.select("svg");

    var circle = svg.append("circle")
        .attr("cx", 50)
        .attr("cy", 50)
        .attr("r", 20)
        .style("color", "green");
}

---

在这一点上，您可以更灵活地根据页面和目标元素在何时何地注入脚本

哦，该死，这太奇怪了！将其放置在末端是否可以保证它将在前面的所有元素之后加载？还有其他解决方案可以让javascript在加载之前等待吗？例如，在大多数情况下，是的。是的，有些人会在Jquery$（document.ready（）中嵌入相同的代码；陈述在这种情况下，Jquery将侦听加载是否完成。我认为您还可以使用body标记中的onload事件调用具有相同代码的函数。但我已经好几年没有这样做了。