Example of Update

by Nivaldo

HTML

<button id="data1">Data1</button>
<button id="data2">Data2</button>

JavaScript

var data1 = ["hello","john"]
var data2 = ["bye","mary"]

var svg = d3.select("body").append("svg");
var text;

function drawText() {
    text = svg.selectAll(".text")
        .data(data1);
    
    text
        .enter()
        .append("text");
    
    text
        .attr("class","text")
        .attr("x",function(d,i){return i * 40;})
        .attr("y",20)
        .text(function(d){return d;});
}

function redrawText() {
    text = svg.selectAll(".text")
        .data(data2);
    
    text
        .attr("x",function(d,i){return i * 40;})
        .attr("y",20)
        .text(function(d){return d;});
}

d3.select('#data1')
    .on("click",drawText);

d3.select('#data2')
    .on("click",redrawText);

drawText();