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?
1 answers
solution1
1 ACCPTED 2021-03-01 08:26:55
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to update a d3 grouped barchart with new data by using join in v6
Can I update DOM elements in a D3 selector based on a data join to a different data object?
Update d3 graph with new data
How to update selection with new data in D3?
Making a d3 chart update with new data
d3 wrongly append dom elements on data update
d3: drawing elements correctly but not adding new data to the dom
Update display of hierarchical data using D3
D3 Data join with containers
Can I merge new and existing data in a D3 join?
Related Tags