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
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.
svgContainer
thatselectAll
is called on?