(parentClass, selector)
| 452 | } |
| 453 | |
| 454 | private drawMarkPaths(parentClass, selector) { |
| 455 | const color = this.model.get('color'); |
| 456 | const boxplot = this.d3el.selectAll(parentClass).data(this.plotData); |
| 457 | |
| 458 | const fillcolor = this.model.get('box_fill_color'); |
| 459 | // Create new |
| 460 | const newBoxplots = boxplot |
| 461 | .enter() |
| 462 | .append('g') |
| 463 | .attr('class', 'boxplot') |
| 464 | .attr('id', (d, i) => { |
| 465 | return 'boxplot' + i; |
| 466 | }); |
| 467 | |
| 468 | /////////////////////////////////////////////////////////////////// |
| 469 | // |
| 470 | // We translate the whole element of 'boxplot' to the x location |
| 471 | // and then scale each of these elements with Y scale. |
| 472 | // |
| 473 | // ( ) <--- outliers (as circles) |
| 474 | // ( ) |
| 475 | // |
| 476 | // ------- <--- whisker_max_end (path as the max) |
| 477 | // | |
| 478 | // | <--- whisker_max (path from top of the box to max) |
| 479 | // | |
| 480 | // --------- |
| 481 | // | | |
| 482 | // | | |
| 483 | // | | <--- box (as a rect) |
| 484 | // | | |
| 485 | // | | |
| 486 | // --------- |
| 487 | // | |
| 488 | // | <--- whisker_min (path from bottom of the box to min) |
| 489 | // | |
| 490 | // ------- <--- whisker_min_end (path at min value) |
| 491 | // |
| 492 | /////////////////////////////////////////////////////////////////// |
| 493 | |
| 494 | newBoxplots.append('path').attr('class', 'whisker_max'); |
| 495 | newBoxplots.append('path').attr('class', 'whisker_max_end'); |
| 496 | newBoxplots.append('path').attr('class', 'whisker_min'); |
| 497 | newBoxplots.append('path').attr('class', 'whisker_min_end'); |
| 498 | newBoxplots.append('rect').attr('class', 'box'); |
| 499 | newBoxplots.append('path').attr('class', 'median_line'); |
| 500 | newBoxplots.append('g').attr('class', 'outliers'); |
| 501 | |
| 502 | const scaleX = this.scales.x; |
| 503 | const xOffset = isOrdinalScale(scaleX) ? scaleX.scale.bandwidth() / 2 : 0; |
| 504 | |
| 505 | selector |
| 506 | .selectAll('.boxplot') |
| 507 | .data(this.plotData) |
| 508 | .style('stroke', this.model.get('stroke')) |
| 509 | .style('opacity', color) |
| 510 | .attr('transform', (d, i) => { |
| 511 | return 'translate(' + (d.x + xOffset) + ', 0)'; |
no test coverage detected