ScatterPlot and canvas, not showing data

[Lucas Viani]

Hello!

I am using the ScatterPlot to display 70K points.
The plot shows up fine using SVG, but when I use the option

 useCanvas(true) the data points disappear, and all the SVG components (Axis, grid lines, etc) are shown normally.

In the debug I can see that all the data is being drawn to the canvas.

I could also see that in my case the canvas is not aligned with the SVG, as it is in the examples in the dc webpage.

I am using dc.js 4.2.7 with Vue.

Any suggestions?

The code I am using is this one:

        var Chart = new dc.ScatterPlot("#prodIrrad-chart")

          Chart

            .height(200)

            .margins(margins)

            .useCanvas(true)

            .dimension(Dim)

            .group(Group)

            .keyAccessor  (function (d) { return d.key[0] })

            .valueAccessor(function (d) { return d.key[1] })

            .colorAccessor(function (d) { return d.key[2] })

            .colors(function(colorKey) { return plotColorMap[colorKey]; })

            .x(d3.scaleLinear().domain([0, this.max_val]))

            .symbolSize(1.5)

            .brushOn(false)

            .renderHorizontalGridLines(true)    

            .excludedOpacity(0.5)

            .excludedColor( '#ddd' )

            .highlightedSize(4)

            .title(function(d) { return 'Flag: '  + d.key[2] + '\n' +

                                                        'Value: ' + d.key[1] })

Thank you!

[Gordon Woodhull]

Hi Lucas,

Your CSS is probably moving the canvas to where it is not visible.

Take a look at the running CSS on a demo that does work, like this one. Then compare with what you are seeing on your own example.

It's using position, top, left, and z-index to put the canvas behind the svg and aligned with the axes - screenshot from dev tools below.

If you can't figure it out, feel free to post a running example e.g. to codepen or jsfiddle, I'd be happy to take a look.

Cheers,

Gordon

<svg.png><canvas.png>

Thank you!

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/9de2775c-8858-4f29-919b-6f840bb3e11dn%40googlegroups.com.
<svg.png><canvas.png>