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.

  • Which version are you in ? Summer 17 pre release ? – Mohith Shrivastava Apr 18 '17 at 20:59
  • We're on Spring '17 still. – SRenberg Apr 18 '17 at 21:18
  • 1
    What type of object is svgContainer that selectAll is called on? – TrevorBliss Apr 18 '17 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 '17 at 22:26
3

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.