CODEWITHSUNDEEP
javascriptd3.js
marielle
marielle

Reputation: 438

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

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?

Upvotes: 0

Views: 46

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

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>

Upvotes: 1

Related Questions