| 331 | } |
| 332 | |
| 333 | draw_legend(elem, x_disp, y_disp, inter_x_disp, inter_y_disp) { |
| 334 | this.legend_el = elem |
| 335 | .selectAll('.legend' + this.uuid) |
| 336 | .data([this.model.mark_data[0]]); |
| 337 | |
| 338 | const rect_dim = inter_y_disp * 0.8; |
| 339 | const new_legend = this.legend_el |
| 340 | .enter() |
| 341 | .append('g') |
| 342 | .attr('class', 'legend' + this.uuid) |
| 343 | .attr('transform', (d, i) => { |
| 344 | return 'translate(0, ' + (i * inter_y_disp + y_disp) + ')'; |
| 345 | }) |
| 346 | .on('mouseover', () => { |
| 347 | this.event_dispatcher('legend_mouse_over'); |
| 348 | }) |
| 349 | .on('mouseout', () => { |
| 350 | this.event_dispatcher('legend_mouse_out'); |
| 351 | }) |
| 352 | .on('click', () => { |
| 353 | this.event_dispatcher('legend_clicked'); |
| 354 | }); |
| 355 | |
| 356 | new_legend |
| 357 | .append('rect') |
| 358 | .style('fill', (d, i) => { |
| 359 | return this.get_colors(i); |
| 360 | }) |
| 361 | .attr('x', 0) |
| 362 | .attr('y', 0) |
| 363 | .attr('width', rect_dim) |
| 364 | .attr('height', rect_dim); |
| 365 | |
| 366 | new_legend |
| 367 | .append('text') |
| 368 | .attr('class', 'legendtext') |
| 369 | .attr('x', rect_dim * 1.2) |
| 370 | .attr('y', rect_dim / 2) |
| 371 | .attr('dy', '0.35em') |
| 372 | .text((d, i) => { |
| 373 | return this.model.get('labels')[i]; |
| 374 | }) |
| 375 | .style('fill', (d, i) => { |
| 376 | return this.get_colors(i); |
| 377 | }); |
| 378 | |
| 379 | this.legend_el = new_legend.merge(this.legend_el); |
| 380 | |
| 381 | const max_length = d3.max(this.model.get('labels'), (d: any[]) => { |
| 382 | return d.length; |
| 383 | }); |
| 384 | |
| 385 | this.legend_el.exit().remove(); |
| 386 | return [1, max_length]; |
| 387 | } |
| 388 | |
| 389 | update_selected(model, value) { |
| 390 | this.selected_indices = this.dataIndexToBarIndex(value); |