使用新语法理解 D3 数据连接 - 数组数据是更新的，但 DOM 不是

Question

我正在尝试了解 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>

colors 数组已更新（查看 console.log），但 DOM 未更新。 为什么它不起作用？ 为什么 DOM 没有更新？ 绑定似乎正确，不是吗？ 我错过了什么？

Answer 1

你错过了操纵dom。 将此 function 添加到 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>

使用新语法理解 D3 数据连接 - 数组数据是更新的，但 DOM 不是

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-01 08:26:55

使用新语法理解 D3 数据连接 - 数组数据是更新的，但 DOM 不是

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-01 08:26:55

解决方案1
1 已采纳 2021-03-01 08:26:55