()
| 208 | } |
| 209 | |
| 210 | draw_color_bar() { |
| 211 | const colorBar = this.d3el.select('#colorBarG' + this.cid); |
| 212 | colorBar.attr('transform', this.get_colorbar_transform()); |
| 213 | const that = this; |
| 214 | colorBar.selectAll('.g-rect').remove(); |
| 215 | colorBar.selectAll('.g-defs').remove(); |
| 216 | |
| 217 | this.colors = this.axis_scale.scale.range() as number[]; |
| 218 | const colorSpacing = 100 / (this.colors.length - 1); |
| 219 | |
| 220 | if (this.ordinal) { |
| 221 | const bar_width = this.get_color_bar_width() / this.colors.length; |
| 222 | let rects = colorBar |
| 223 | .append('g') |
| 224 | .attr('class', 'g-rect axis') |
| 225 | .selectAll('rect') |
| 226 | .data(this.colors); |
| 227 | |
| 228 | rects = rects |
| 229 | .enter() |
| 230 | .append('rect') |
| 231 | .attr('y', 0) |
| 232 | .attr('height', this.bar_height) |
| 233 | .attr('width', bar_width) |
| 234 | .style('fill', (d) => { |
| 235 | return d; |
| 236 | }) |
| 237 | .merge(rects as d3.Selection<SVGRectElement, number, SVGGElement, any>); |
| 238 | |
| 239 | if (this.vertical) { |
| 240 | rects.attr('x', (d, i) => { |
| 241 | return i * bar_width - (that.height - 2 * that.x_offset); |
| 242 | }); |
| 243 | } else { |
| 244 | rects.attr('x', (d, i) => { |
| 245 | return i * bar_width; |
| 246 | }); |
| 247 | } |
| 248 | } else { |
| 249 | const gradient = colorBar |
| 250 | .append('g') |
| 251 | .attr('class', 'g-defs') |
| 252 | .append('defs') |
| 253 | .append('linearGradient'); |
| 254 | applyAttrs(gradient, { |
| 255 | id: 'colorBarGradient' + this.cid, |
| 256 | x1: '0%', |
| 257 | y1: '0%', |
| 258 | x2: '100%', |
| 259 | y2: '0%', |
| 260 | }); |
| 261 | const stop = gradient |
| 262 | .selectAll('stop') |
| 263 | .data(this.colors) |
| 264 | .enter() |
| 265 | .append('stop'); |
| 266 | applyAttrs(stop, { |
| 267 | offset: function (d, i) { |
no test coverage detected