click to sort 1

by Laurie Skelly

HTML

<svg height="400px" width="600px"></svg>

CSS

circle {
    stroke:orange;
    stroke-width:3px;
    fill:whitesmoke;
}

text {
    font-family:georgia;
    font-size:24px;
    fill:orange;    
}

JavaScript

data = [{a:1,b:5,name:'jo'},{a:2,b:3,name:'lulu'},{a:3,b:4,name:'tim'},{a:4,b:2,name:'bob'}]

circles = d3.select('svg').selectAll('.circle')
.data(data).enter()
.append('g')
.attr('class','circle')
.attr('id', function(d) {return d.name})
.attr('transform',function(d,i){
    console.log('orig',this,d.name,d.b,i)
    return 'translate('+(i*125 + 100)+',0)'})
draw(circles)

function draw(circles){
    
circles.append('circle')
.attr('cx',0)
.attr('cy',100)
.attr('r',35)

circles.append('text')
.attr('y',100)
.attr('dy','.25em')
.attr('text-anchor','middle')
.text(function(d){return d.name})

circles.append('text')
.attr('y',150)
.attr('text-anchor','middle')
.attr('dx',-30)
.text(function(d){return d.a})

circles.append('text')
.attr('y',150)
.attr('text-anchor','middle')
.attr('dx',30)
.text(function(d){return d.b})
}

butt = d3.select('svg').append('g')
.attr('transform','translate(65,200)')

butt.append('rect')
.attr('height',50)
.attr('width',100)
.style('fill','whitesmoke')
.style('stroke','orange')
.style('stroke-width','3px')
.on('click',sortcircles)
    
butt.append('text')
.attr('x',50)
.attr('dy','1.4em')
.attr('text-anchor','middle')
.attr('pointer-events','none')
.text('click')

function sortcircles(){
    console.log('click')
    circles = d3.selectAll('.circle')
    .data(data.sort(function(a,b) {return a.b-b.b}))
    draw(circles)
    
//     circles.transition()
//    .duration(2000)
//    .attr('transform',function(d,i){
//        console.log(this,d.name,d.b,i);
//        return 'translate('+(i*125 + 100)+',0)';
//    })
//    .attr('id',function(d){return d.name}) 
}