数据绑定与D3.js



我错过了什么,或者做错了什么,我没有在页面上看到五次文本(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"

最新更新