LockerService with Lightning Components & d3 transformation issue

Question

I'm experiencing issues with d3 v4.4.0 and v4.7.3 when I'm trying to redraw some chart.

There is a problem with g tag decomposition. When I try to redraw some element:

    rect.transition()
        .attr("transform", rectTransform)
        .attr("height", function (d) {
            return d.oneDayTask ?
                    Math.sqrt(Math.pow(y.bandwidth(), 2) /2)
                :   y.bandwidth();
        })
        .attr("width", function (d) {
            return  d.oneDayTask ?
                    Math.sqrt( Math.pow(y.bandwidth(), 2) / 2)
                :   Math.max(1, (x(d.endDate) - x(d.startDate)));
        });

I get this error:

Uncaught TypeError: Cannot read property 'baseVal' of undefined

Issue is related to this function:

function parseSvg(value) {
    if (value == null) return identity$2;
    if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
    svgNode.setAttribute("transform", value);
    if (!(value = svgNode.transform.baseVal.consolidate())) return identity$2;
    value = value.matrix;
    return decompose(value.a, value.b, value.c, value.d, value.e, value.f);
}

svg.transform is missing (undefined)

It seems to be an issue of LockerService or intended action?

Does anyone have any idea how to solve it?

Answer 1

This has been resolved in the Summer '17 major release.

LockerService was mistakenly excluding a number of SVG elements and their properties from being exposed. Among these were SVGTransformList and SVGAnimatedTransformList.

Also, please continue to use D3 version 4.4.0 as it is currently the most reliable to work inside Locker.