General Update Pattern for D3(D3的常用更新模式)

app.js

var add = d3.select("#add");//add is a button

add.on('click', function(){
quotes = quotes.concat(newQuotes);
  
var listItems = d3.select("#quotes")
  .selectAll("li")
  .data(quotes);
  
  listItems
  .enter()
  .append("li")
  .text(d => '"' + d.quote + '" -' + d.movie + '(' + d.year + ')')
  .style("margin", "20px")
  .style("padding", "0")
  .style("font-size", d=> d.quote.length < 25? "2em":"1em")
  .style("background-color", d => colors[d.rating])
  .style("border-radius", "8px")
  .merge(listItems)
  .style("color", "#5599ff");
  add.remove();
                                     




})