我刚刚开始学习d3.js,我有一个非常简单的程序,它只是创建一个矩形:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> D3 Slider </slider>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div>
<script>
//make the svg container
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
//make the rectangle
var rectangle = svgContainer.append("rect")
.attr("x",150)
.attr("y",50)
.attr("width",50)
.attr("height",140);
</script>
</div>
</body>
</html>
但是当我运行它时,矩形不会创建,我得到一个空白屏幕?我是否必须将SVG元素添加到div中?对不起,如果这是一个简单的问题,但我无法理解!
答案 0 :(得分:4)
<title> D3 Slider </slider>
正在关闭,</slider>
已更改回</title>
,使代码完美运行
还建议在关闭</body>
之前或<head>
脚本下面的d3.js
标记中移动脚本
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Slider</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div>
</div>
<script>
//make the svg container
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
//make the rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 150)
.attr("y", 50)
.attr("width", 50)
.attr("height", 140);
</script>
</body>
</html>
&#13;