()
| 190 | } |
| 191 | |
| 192 | draw() { |
| 193 | this.set_ranges(); |
| 194 | |
| 195 | const x_scale = this.scales.sample, |
| 196 | y_scale = this.scales.count; |
| 197 | const bar_width = this.computeBarWidth(); |
| 198 | let bar_groups: d3.Selection<any, any, any, any> = this.d3el |
| 199 | .selectAll('.bargroup') |
| 200 | .data(this.model.mark_data); |
| 201 | |
| 202 | bar_groups.exit().remove(); |
| 203 | |
| 204 | const bars_added = bar_groups.enter().append('g').attr('class', 'bargroup'); |
| 205 | |
| 206 | // initial values for width and height are set for animation |
| 207 | bars_added |
| 208 | .append('rect') |
| 209 | .attr('class', 'rect') |
| 210 | .attr('x', 2) |
| 211 | .attr('width', 0) |
| 212 | .attr('height', 0); |
| 213 | |
| 214 | bar_groups = bars_added.merge(bar_groups); |
| 215 | |
| 216 | bar_groups.attr('transform', (d: BinData, i: number) => { |
| 217 | return ( |
| 218 | 'translate(' + |
| 219 | x_scale.scale(d.bin.x0) + |
| 220 | ',' + |
| 221 | y_scale.scale(this.model.count[i]) + |
| 222 | ')' |
| 223 | ); |
| 224 | }); |
| 225 | |
| 226 | bar_groups |
| 227 | .select('.rect') |
| 228 | .style('fill', (d: BinData, i) => { |
| 229 | return this.get_colors(d.index); |
| 230 | }) |
| 231 | .on('click', (d, i) => { |
| 232 | return this.event_dispatcher('element_clicked', { |
| 233 | data: d, |
| 234 | index: d.index, |
| 235 | }); |
| 236 | }) |
| 237 | .attr('id', (d, i) => { |
| 238 | return 'rect' + i; |
| 239 | }) |
| 240 | .transition('draw') |
| 241 | .duration(this.parent.model.get('animation_duration')) |
| 242 | .attr('width', bar_width) |
| 243 | .attr('height', (d: BinData, i: number) => { |
| 244 | return y_scale.scale(0) - y_scale.scale(this.model.count[i]); |
| 245 | }); |
| 246 | |
| 247 | //bin_pixels contains the pixel values of the start points of each |
| 248 | //of the bins and the end point of the last bin. |
| 249 | this.bin_pixels = this.model.xBins.map((el) => { |
no test coverage detected