Commit 5bea303f authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

fixed grid canvas priority issue

parent f872cbb9
@import 'base.css'; @import 'base.css';
.ac-scatter-canvas { .ac-scatter-canvas {
position: absolute;
} }
.ac-scatter-svg { .ac-scatter-svg {
......
...@@ -9,15 +9,13 @@ export default class extends Chart { ...@@ -9,15 +9,13 @@ export default class extends Chart {
constructor({ container }) { constructor({ container }) {
super({ container }); super({ container });
this.memory = d3.select(document.createElement('memory')); this.memory = d3.select(document.createElement('memory'))
this.canvas = d3.select(container)
.append('canvas')
.attr('class', 'ac-scatter-canvas');
this.hiddenCanvas = document.createElement('canvas'); this.hiddenCanvas = document.createElement('canvas');
this.svg = d3.select(container) this.svg = d3.select(container)
.append('svg') .append('svg')
.attr('class', 'ac-scatter-svg') .attr('class', 'ac-scatter-svg')
.append('g'); .append('g');
this.tooltip = d3.select(container) this.tooltip = d3.select(container)
.append('div') .append('div')
.attr('class', 'ac-scatter-tooltip'); .attr('class', 'ac-scatter-tooltip');
...@@ -38,6 +36,21 @@ export default class extends Chart { ...@@ -38,6 +36,21 @@ export default class extends Chart {
.append('g') .append('g')
.attr('class', 'ac-scatter-y-axis ac-scatter-axis'); .attr('class', 'ac-scatter-y-axis ac-scatter-axis');
this.foreignObject = this.svg
.append('foreignObject');
this.foreignBody = this.foreignObject
.append('xhtml:body')
.style('margin', '0px')
.style('padding', '0px')
.style('background-color', 'none');
this.canvas = this.foreignBody
.append('canvas')
.attr('x', 0)
.attr('y', 0)
.attr('class', 'ac-scatter-canvas');
this.titleHeader = this.svg this.titleHeader = this.svg
.append('text') .append('text')
.attr('class', 'ac-scatter-title'); .attr('class', 'ac-scatter-title');
...@@ -49,6 +62,7 @@ export default class extends Chart { ...@@ -49,6 +62,7 @@ export default class extends Chart {
this.legend = this.svg this.legend = this.svg
.append('g') .append('g')
.attr('class', 'ac-scatter-legend'); .attr('class', 'ac-scatter-legend');
this.legend this.legend
.append('rect'); .append('rect');
...@@ -116,10 +130,19 @@ export default class extends Chart { ...@@ -116,10 +130,19 @@ export default class extends Chart {
.range(d3.schemeSet2); .range(d3.schemeSet2);
} }
this.foreignObject
.attr('x', margin.x)
.attr('y', margin.y)
.attr('width', width)
.attr('height', height);
this.foreignBody
.style('width', `${width}px`)
.style('height', `${height}px`);
this.canvas this.canvas
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height);
.style('transform', `translate(${margin.left}px, ${margin.top}px)`);
this.hiddenCanvas.width = width; this.hiddenCanvas.width = width;
this.hiddenCanvas.height = height; this.hiddenCanvas.height = height;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment