8

Our d3 & Lightning Components work correctly when LockerService is turned off, but do not work when Locker Service is turned on. We're running d3 4.4.0 as specified by the list of Locker Service compatible libraries.

On load, we're able to draw our SVG items, but we're not able to re-draw in any way. We get errors from everything from an update function:

updateTeapot: function updateTeapot(config) {

        var me = this;

        me.teapot.svgContainer.selectAll("g").remove();
        _.extend(me.teapot.config, config);
        me.teapot.config.lineOpacity = me.teapot.config.household ? 0.3 : 1;
        me.teapot.dataset = new Teapot.dataset(me.teapot); 
    }

Which errors on the "selectAll" line with the following error:

[raw.push is not a function]

to a zoom in function:

 zoomIn: function zoomIn() {
        var me = this;

        if (me.ratio < 2) {
            var viewboxWidth = me.teapot.svgContainer.node().viewBox.baseVal.width / me.teapot.config.defaultZoomRatio;
            var viewboxHeight = me.teapot.svgContainer.node().viewBox.baseVal.height / me.teapot.config.defaultZoomRatio;
            var newRatio;

            if (me.xRatio < me.yRatio) {
                newRatio = me.containerWidth / viewboxWidth;
            } else {
                newRatio = me.containerHeight / viewboxHeight;
            }

            if (newRatio < me.genogram.config.zoomMaxRatio * 1.5) {
                me.ratioZoom = newRatio;
                me.size.width = viewboxWidth;
                me.size.height = viewboxHeight;
            }

            console.log('ratio zoom', me.ratioZoom);

            me.teapot.svgContainer.attr('viewBox', ' ' + me.teapot.svgContainer.node().viewBox.baseVal.x + ' ' + me.teapot.svgContainer.node().viewBox.baseVal.y + ' ' + me.size.width + ' ' + me.size.height);
        }
    }

which errors with:

[Cannot read property 'baseVal' of undefined]

There are various other examples. It looks like similar errors have been reported: LockerService with Lightning Components & d3 transformation issue

Dynamic rendering of D3 charts - D3.js selectAll function is not working when Lighting Locker is enabled

and that at least the first should be resolved in the Summer '17 release. Is there anything we can fix on our end? Any help would be appreciated.

Improve this question
4
  • Which version are you in ? Summer 17 pre release ?
    – Mohith Shrivastava
    Apr 18, 2017 at 20:59
  • We're on Spring '17 still.
    – SRenberg
    Apr 18, 2017 at 21:18
  • 1
    What type of object is svgContainer that selectAll is called on?
    – TrevorBliss
    Apr 18, 2017 at 21:26
  • 2
    Here's the definition of that object: me.svgContainer = d3.select(elementId).append('svg').attr('viewBox', '0 0 0 0').attr('width', '100%').attr('height', '100%').attr('preserveAspectRatio', 'xMinYMin meet').attr('draggable', 'true').attr("xmlns", "w3.org/2000/svg").attr("version", "1.1").attr("xmlns:xlink", "w3.org/1999/xlink").attr('id', 'myTeapotSVG').attr('style', 'background-color:#f0f8fc').classed('svg-content-responsive', true);
    – SRenberg
    Apr 18, 2017 at 22:26

1 Answer 1

Reset to default
4

I tried out the first scenarios me.teapot.svgContainer.selectAll("g").remove(); defining me.teapot.svgContainer to be what you stated in the comment. This executes successfully in Summer '17 without any error.

For the 2nd scenario, I couldn't get me.teapot.svgContainer.node() to return anything meaninful, even with LockerService disabled. It must be defined differently. Based on the error message however, I suspect this is fixed in Summer '17 as well.

Improve this answer
1
  • Thanks, Trevor! We'll keep our fingers crossed for when Summer '17 gets released in our org.
    – SRenberg
    Apr 19, 2017 at 19:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .