D3 JS

Test pour le DOT-PLOT du projet Anagène

by Guillaume Seguin

HTML

<body>
    <h1>D3</h1>
    <svg width="720" height="120"></svg>
</body>

JavaScript

var svg = d3.select("svg");
var dataOld = ['A', 'B', 'C', 'D', 'E'];
var dataNew = ['Y', 'E', 'A', 'O', 'I'];
var textList = svg.selectAll('text').data(dataOld, function(d){
    return d;
});

textList.enter().append('text');

textList.attr( 'x', function(d, i){
   return i*15 + 30;
});

textList.text( function(d){
   return d;
});

textList.attr( 'y', 50);

textList = svg.selectAll('text').data(dataNew, function(d){
    return d;
});

textList.exit().attr( 'fill', 'red').transition().delay(1000).remove();

textList.enter().append('text')
.attr( 'x', function(d, i){
   return i*15 + 30;
}).text( function(d){
   return d;
}).attr( 'y', 50).attr( 'fill', 'green').transition().delay(2000);