function updateInfoLegend(list, event, height, width, countries, items) { var radius = 5; var charsLimit = 13; items--; var display = event[3].slice(0, Math.min(items, event[3].length)); var other = { color: 'transparent', id: 'other' }; if (event[3].length === (display.length + 1)) { display.push(event[3].length - 1); } else if (event[3].length > display.length) { other.v = 0; for (var i = display.length; i < event[3].length; i++) { other.v += event[1][event[3][i]]; } other.title = (event[3].length - display.length) + ' other'; other.i = display.length; display.push(other.id); } var z = list.selectAll('g').data(display, function (d) { return d; }); z.exit().remove(); z.transition().attr('opacity', 1).attr('transform', function (d, i) { return 'translate(0,' + (height - i * 20 - 10) + ')' }); var g = z.enter().append('g'); g.append('circle'); g.append('text') .attr('class', 'name') .attr('transform', 'translate(' + radius * 3 + ',0)'); g.append('text') .attr('class', 'value') .attr('dx', width) .attr('text-anchor', 'end'); g.attr('opacity', 0) .attr('transform', function (d, i) { return 'translate(' + (width / 2) + ',' + (height - i * 20 - 10) + ')' }) .transition().duration(200).delay(200) .attr('opacity', 1).attr('transform', function (d, i) { return 'translate(0,' + (height - i * 20 - 10) + ')' }); list.selectAll('text.name') .text(function (d) { return !countries[d] ? other.title : ((countries[d].properties.name.length > charsLimit) ? d : countries[d].properties.name); }); list.selectAll('text.value') .text(function (d) { return !event[1][d] ? other.v : event[1][d]; }); list.selectAll('circle') .attr('cy', -radius) .attr('cx', radius) .attr('r', radius) .style('fill', function (d) { var i = event[3].indexOf(d); return i === -1 ? other.color : event[4][i].color; }); }