d3.style('padding') or d3.style('margin') returned empty string only in firefox

[ZaharovDm]

in Firefox

in Google

[ZaharovDm]

    this.currentContainer = this.parentContainer.append("g")
        .attr("id", data.id)
        .attr("class", className)
        .attr("stroke-opacity", opacity)

this.currentContainer.style('margin')

[mbostock]

You can see what selection.style returns here:

d3-selection/src/selection/style.js

Line 34 in 91245ee

|| defaultView(node).getComputedStyle(node, null).getPropertyValue(name);

If Firefox returns an empty string, it’s because Firefox defines that as the computed value. D3 is not a compatibility layer, so it does not include workarounds to normalize different behaviors across browsers.

I suspect the problem here is that the G element is an SVG element, where the HTML styles of margin and padding do not make sense. These styles have no effect on layout within an SVG element; you must use the transform attribute to change how a G element is positioned. I suspect that Firefox does not compute HTML styles on SVG G elements, whereas other browsers may (even though they have no effect).