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

Question

I'm trying to understand the D3 data join pattern.我正在尝试了解 D3 数据连接模式。 Here my example:这是我的例子：

 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>

The colors array is update (looks at the console.log) but the DOM not. colors 数组已更新（查看 console.log），但 DOM 未更新。 Why it doesn't work?为什么它不起作用？ Why the DOM is not update?为什么 DOM 没有更新？ The binding seems right, no?绑定似乎正确，不是吗？ What I'm missing?我错过了什么？

Answer 1

u missed to manipulate dom.你错过了操纵dom。 Add this function to js将此 function 添加到 js

function update(){
  ul.selectAll("li")
  .data(colors)
  .join(
    (enter) => enter.append("li").text((d) => d),
    (update) => update,
    (exit) => exit.remove()
  );
}

and call it in events并在事件中调用它

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);
});

full example完整的例子

 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