Webgl points series rendering below gridlines.

[jessechiasson]

How can I render my WebGL points on top of the SVG layer. I tried to use .order() but it didn't seem to work. The gridlines appear over my data points. Thanks for any help.

const gridlines = fc
        .annotationSvgGridline()
        .xScale(this.xScale)
        .xDecorate((selection) => {
          selection
          .attr("id","gridlines")
          .style('stroke-width',nextProps.show_gridlines?'1px':'0')
          .style('stroke','rbga(255,0,0,1)')
        })
        .yDecorate((selection) => {
          selection
          .attr("id","gridlines")
          .style('stroke-width',nextProps.show_gridlines?'1px':'0')
          .style('stroke','rbga(255,0,0,1)')
        })
...
const pointSeries = fc
        .seriesWebglPoint()
        .equals((a, b) => a === b)
        .size(this.toggle_alt_input_s ? d => Math.round(d.s) : nextProps.size_points)
        .crossValue(d => d.x)
        .mainValue(d => d.y)        
        .decorate(program => {
          this.toggle_alt_input_c > 0 ? colorScale(program) : fillColor(program);
          nextProps.toggle_dot_outline ? fc.webglStrokeColor([0, 0, 0, nextProps.points_opacity])(program) : fc.webglStrokeColor([0, 0, 0, 0])(program);
        })
        .type(symbolCircle);
...
const chart = fc
        .chartCartesian(this.xScale, this.yScale)                
        .webglPlotArea(            
          fc 
          .seriesWebglMulti()
          .series([ this.pointSeries ]) 
          .mapping((d, index, series) => {
            switch(series[index]) {
              case this.pointSeries:return d.data; 
            }
          }),
        )
        .svgPlotArea(          
          fc     
          .seriesSvgMulti()
          .series([current_line, gridlines])
          .mapping((data, index, series) => {
            switch(series[index]) {
              case current_line:
                return current_value;              
            }
          }),          
        )
        .yDecorate((sel_y, d) => {          
          d3.select('#chart')
            .select('.y-axis')
            .call(this.dragY)
            .attr("pointer-events", "none")
        })
        .xDecorate((sel_x, d) => {
          d3.select('#chart')
            .select('.x-axis')
            .call(this.dragX)
            .attr("pointer-events", "none")            
        })
        .decorate(sel => {  
            sel
            .selectAll("d3fc-svg")            
            .on("click", (event) => {
                this.handleClick(event)
            })  

            sel
            .enter()
            .select("d3fc-svg.plot-area")
            .select('svg')
            .attr('id','floor')
            .on("measure.range", (event) => {
                let detail = event.detail;
                this.xScaleOriginal.range([0, detail.width]);
                this.yScaleOriginal.range([detail.height, 0]);
            })                
            .call(this.selectedBehavior)

            sel
            .select(".webgl-plot-area.plot-area")
            .enter()
            .on('measure', event => {
              const { width, height } = event.detail;
              this.xScale.range([0, width]);
              this.yScale.range([height, 0]);
           })
            .call(this.pointer)           
                               
            const svgPlot = sel.enter()
            .select("d3fc-svg.plot-area")
            .node()

            const webglPlot = sel.enter()
            .select(".webgl-plot-area.plot-area")
            .node()

            sel
            .selectAll([webglPlot,svgPlot])
            .order();            
            
          }            
        ); 

` 

[chrisprice]

Try using the technique from this example- https://github.com/d3fc/d3fc/blob/master/examples/diamonds/index.js#L60

…

On Mon, 22 Aug 2022, 16:29 jessechiasson, ***@***.***> wrote: How can I render my WebGL points on top of the SVG layer. I tried to use .order() but it didn't seem to work. ` const gridlines = fc .annotationSvgGridline() .xScale(this.xScale) .xDecorate((selection) => { selection .attr("id","gridlines") .style('stroke-width',nextProps.show_gridlines?'1px':'0') .style('stroke','rbga(255,0,0,1)') }) .yDecorate((selection) => { selection .attr("id","gridlines") .style('stroke-width',nextProps.show_gridlines?'1px':'0') .style('stroke','rbga(255,0,0,1)') }) ... const pointSeries = fc .seriesWebglPoint() .equals((a, b) => a === b) .size(this.toggle_alt_input_s ? d => Math.round(d.s) : nextProps.size_points) .crossValue(d => d.x) .mainValue(d => d.y) .decorate(program => { this.toggle_alt_input_c > 0 ? colorScale(program) : fillColor(program); nextProps.toggle_dot_outline ? fc.webglStrokeColor([0, 0, 0, nextProps.points_opacity])(program) : fc.webglStrokeColor([0, 0, 0, 0])(program); }) .type(symbolCircle); ... const chart = fc .chartCartesian(this.xScale, this.yScale) .webglPlotArea( fc .seriesWebglMulti() .series([ this.pointSeries ]) .mapping((d, index, series) => { switch(series[index]) { case this.pointSeries:return d.data; } }), ) .svgPlotArea( fc .seriesSvgMulti() .series([current_line, gridlines]) .mapping((data, index, series) => { switch(series[index]) { case current_line: return current_value; } }), ) .yDecorate((sel_y, d) => { d3.select('#chart') .select('.y-axis') .call(this.dragY) .attr("pointer-events", "none") }) .xDecorate((sel_x, d) => { d3.select('#chart') .select('.x-axis') .call(this.dragX) .attr("pointer-events", "none") }) .decorate(sel => { sel .selectAll("d3fc-svg") .on("click", (event) => { this.handleClick(event) }) sel .enter() .select("d3fc-svg.plot-area") .select('svg') .attr('id','floor') .on("measure.range", (event) => { let detail = event.detail; this.xScaleOriginal.range([0, detail.width]); this.yScaleOriginal.range([detail.height, 0]); }) .call(this.selectedBehavior) sel .select(".webgl-plot-area.plot-area") .enter() .on('measure', event => { const { width, height } = event.detail; this.xScale.range([0, width]); this.yScale.range([height, 0]); }) .call(this.pointer) const svgPlot = sel.enter() .select("d3fc-svg.plot-area") .node() const webglPlot = sel.enter() .select(".webgl-plot-area.plot-area") .node() sel .selectAll([webglPlot,svgPlot]) .order(); } ); ` — Reply to this email directly, view it on GitHub <#1763>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADJ2MIWXVQWZFFLCV7RUFDV2OMGRANCNFSM57IEABOA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[jessechiasson]

.raise() worked brilliantly. Thanks so much, really appreciate it. I didn't see that in the docs.