D3: SVG没有被附加到正文

D3: SVG not being appended to body

本文关键字：正文 SVG D3      更新时间：2023-09-26

我试图通过使用他们的代码作为我自己修改的模板来遵循回答成员jsbin的示例。因为什么都没有出现，我尝试直接复制和粘贴他们的代码，但这也不起作用。实际上，我想添加到正文中的svg元素根本就没有出现。最后，我编写了一个非常非常简单的脚本来测试将svg添加到正文中。

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
svg{
    border:1px solid #ccc;
}
</style>
<script>
var svg = d3.select("body").append("svg")
    .attr("width",500).attr("height",300);
</script>
</head>
<body>
</body>
</html>

然而，即使这在我的笔记本电脑(从notepad++)在Chrome中运行时也不起作用。我的其他更复杂的程序将完美地运行，这个(http://jsbin.com/zeqecoge/1/edit)的jsbin也可以工作。我很困惑，我想知道如果我只是做了一些完全错误的东西

您没有在您发布的代码片段中定义正文，更重要的是，当script标记中的脚本被评估时，不存在正文标记(它知道)

试试这个:

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
svg{
    border:1px solid #ccc;
}
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
    .attr("width",500).attr("height",300);
</script>
</body>
</html>

注意:我不是一个html/js专家，我希望如果我错了，有人会纠正我。浏览器打开html文件的行为是从上到下读取文件，所以当它到达你的脚本时，你要求选择body标签(和追加等等)，但它没有遇到body标签。因此，这里的修复不仅是添加body标签(因此它存在)，而且还将脚本放置在body标签内(或之后)(因此计算机在评估脚本时意识到它)。

相关文章：