引入d3.js的麻烦

时间:2013-03-26 17:45:10

标签: javascript html5 svg d3.js

所以我刚刚开始使用d3.js并且我一直收到JavaScript错误而且我不知道为什么。我刚用svg创建了三个圆圈,想要用d3选择它们。这是我的代码:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript"></script>        
</head>
<body>
    <svg width="360" height="180">
        <circle class="little" cx="180" cy="45" r="12"></circle>
        <circle class="little" cx="60" cy="90" r="12"></circle>
        <circle class="little" cx="300" cy="135" r="12"></circle>
    </svg>
    <script type="text/javascript">
        var circle = svg.selectAll("circle");
    </script>
</body>
</html>

这应该选择页面上的圆圈,这样我就可以操作它们了但是我的Web控制台中一直有一个引用错误,说svg没有定义?但是介绍性教程没有说明定义svg的内容?

1 个答案:

答案 0 :(得分:8)

在使用svg.selectAll之前,您需要先实际选择svg元素。

var svg = d3.select(document.getElementById('sampleSVGId')),
    circle = svg.selectAll('circle');