我错过了什么,或者做错了什么,我没有在页面上看到五次文本(Hello) ?
index . html
<html>
<head>
<title>Data Binding</title>
</head>
<body>
<h1>D3.js</h1>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="data-script.js"></script>
</body>
</html>
data-script.js
var dataset = [1, 2, 3, 4, 5];
d3.select('body')
.data(dataset)
.enter()
.append('p')
.text("Hello");
要按照dataset
数组的长度在<body>
中插入<p>
节点,您可以在<body>
的选择中创建一个空的选择,例如:
// data-script.js
var dataset = [1, 2, 3, 4, 5];
d3.select('body')
.selectAll("p") // <----- this is the extra line you need
.data(dataset)
.enter()
.append('p')
.text("Hello");
<html>
<head>
<title>Data Binding</title>
</head>
<body>
<h1>D3.js</h1>
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- <script src="data-script.js"></script> -->
</body>
</html>
选择器"p"
可以是任何你需要的,例如一个类".testParagraph"
。