d3 的update,enter,exit理解(2)

d3 的update,enter,exit理解(2)

by Shang-De You

JavaScript

// -- enter --

var dataSet = ["蘋果","香蕉","芭樂","西瓜"]

var p = d3.select("body").selectAll("p")

var enter = p.data(dataSet).enter()

enter
  .append("p")
  .text(function(d,i){
    return d + " " + i
  })

// -- update --

dataSet = ["香瓜","葡萄"]
p = d3.select("body").selectAll("p")

var update = p.data(dataSet)

update
  .text(function(d,i){
    return d + " " + i
  })

// -- exit --

var exit = update.exit()
exit.remove()