legend = { // fixed font size var a4 = 11; // row count var a6 = 0; // row columns var a7 = 0; var max_row_height_from_x = Math.round((a0-150)/100); // magic numbers var max_row_height_from_y = Math.round((a10-150)/50); // magic numbers // console.log(a6,max_row_height_from_x,max_row_height_from_y); a6 = (max_row_height_from_x < max_row_height_from_y) ? max_row_height_from_x : max_row_height_from_y; // more rough calculations based on series (step two) // we're going to make an array of estimated lengths and then do some maths var label_lengths = []; for (var label in series){ var est_px_width = series[label].length*0.52*a4; label_lengths.push(est_px_width); } var horz_length = d3.sum(label_lengths)+label_lengths.length*13; // adding chip length var label_avg = d3.mean(label_lengths); var label_deviation = d3.deviation(label_lengths); // console.log(horz_length,label_avg,label_deviation); // if similar lengths and not space filling, add columns // embarrassing code if (label_deviation/label_avg < 0.5 && horz_length > a0) { var label_size = label_avg + 13; if (label_size/a0 > 1) a7 = 1; // truncate if too long if (label_size/a0 < 0.75) a7 = 2; if (label_size/a0 < 0.5) a7 = 3; if (label_size/a0 < 0.33) a7 = 4; if (label_size/a0 < 0.25) a7 = 5; if (label_size/a0 < 0.2) a7 = 6; if (label_size/a0 < 0.15) a7 = 8; if (label_size/a0 < 0.10) a7 = 10; if (label_size/a0 < 0.05) a7 = 20; a6 = Math.ceil(series.length/a7); } if (horz_length < a0) a6 = 1; // rough calculation for responsive design (step one) var least = (max_row_height_from_x < max_row_height_from_y) ? max_row_height_from_x : max_row_height_from_y; if (least < a6) a6 = least; console.log(a6); var div = d3.create("div") .style('padding-bottom','60px') .attr('class','legendContainer') div.append('div') .text(d => a0 + 'px x ' + a10 + 'px') .style('color','red') .style('width',d => a0 + 'px') .style('height',d => a10 + 'px') .style('border','1px solid red') var div2 = div.append('div') .attr('class','legendContainerResize') .style('border-bottom','1px solid red') .style('padding-top','8px') .style('padding-bottom','4px') .style('width',d => a0 + 'px') .style('overflow','hidden') .style('height',function(d){ // this controls graph height return a6*((parseInt(a4)*1.5+3)+0) + 'px' }) var legendItem = div2.selectAll('div.item') .data(series) .enter() .append('div') .attr('class','item') .style('display','inline-block') .style('width',function(d){ if (a7 === 0) {return 'none'} else {return a0/a7 - 8 + 'px'} }) .style('padding-right','8px') .style('color','#1C2B34') .style('font-size',d => a4 + 'px') .style('margin-bottom','0px') .style('white-space','nowrap') .style('overflow','hidden') .style('word-break','break-word') .style('text-overflow','ellipsis') colorChip(legendItem); legendItem.append('span') .text(d => d) return div.node() }