我试图理解D3数据连接模式。下面是我的例子:
const colors = ["white", "yellow", "red", "brown", "orange"];
const root = d3.select("#root");
const addColor = d3.select("#add-color");
addColor.on("click", (d) => {
colors.push("green");
console.log(colors);
});
const removeColor = d3.select("#remove-color");
removeColor.on("click", (d) => {
colors.pop();
console.log(colors);
});
const ul = root.append("ul");
ul.selectAll("li")
.data(colors)
.join(
(enter) => enter.append("li").text((d) => d),
(update) => update,
(exit) => exit.remove()
);#buttons-container {
display: flex;
margin-bottom: 30px;
}
#buttons-container div {
min-width: 30px;
text-align: center;
cursor: pointer;
border: 1px solid black;
margin-right: 50px;
}<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<body>
<div id="root">
<div id="buttons-container">
<div id="add-color">+1</div>
<div id="remove-color">-1</div>
</div>
</root>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"
></script>
<script type="text/javascript" src="./index.js"></script>
<script type="text/css" src="./styles.css"></script>
</body>
</html>颜色数组更新(查看console.log)，但DOM没有。为什么它不起作用?为什么DOM不更新?装订似乎是对的，不是吗?我错过了什么?
您错过了操作dom。将这个函数添加到js
function update(){
ul.selectAll("li")
.data(colors)
.join(
(enter) => enter.append("li").text((d) => d),
(update) => update,
(exit) => exit.remove()
);
}
addColor.on("click", (d) => {
colors.push("green");
update()
console.log(colors);
});
const removeColor = d3.select("#remove-color");
removeColor.on("click", (d) => {
colors.pop();
update();
console.log(colors);
});
完整的示例
const colors = ["white", "yellow", "red", "brown", "orange"];
const root = d3.select("#root");
const addColor = d3.select("#add-color");
addColor.on("click", (d) => {
colors.push("green");
update();
});
const removeColor = d3.select("#remove-color");
removeColor.on("click", (d) => {
colors.pop();
update();
});
const ul = root.append("ul");
ul.selectAll("li")
.data(colors)
.join(
(enter) => enter.append("li").text((d) => d),
(update) => update,
(exit) => exit.remove()
);
function update(){
ul.selectAll("li")
.data(colors)
.join(
(enter) => enter.append("li").text((d) => d),
(update) => update,
(exit) => exit.remove()
);
}#buttons-container {
display: flex;
margin-bottom: 30px;
}
#buttons-container div {
min-width: 30px;
text-align: center;
cursor: pointer;
border: 1px solid black;
margin-right: 50px;
}<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<body>
<div id="root">
<div id="buttons-container">
<div id="add-color">+1</div>
<div id="remove-color">-1</div>
</div>
</root>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"
></script>
<script type="text/javascript" src="./index.js"></script>
<script type="text/css" src="./styles.css"></script>
</body>
</html>