Understanding D3 data join using the new syntax - Array data is update but DOM not

Question

I'm trying to understand the D3 data join pattern. 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. Why it doesn't work? Why the DOM is not update? The binding seems right, no? What I'm missing?

Cagri Tacyildiz · Accepted Answer · 2021-03-01 08:26:55Z

u missed to manipulate dom. Add this function to 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>

Collectives™ on Stack Overflow

Understanding D3 data join using the new syntax - Array data is update but DOM not

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related