search

d3 / d3-selection

Transform the DOM by selecting elements and joining to data.
https://d3js.org/d3-selection
ISC License
558 stars 292 forks source link

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

Closed ZaharovDm closed 3 years ago

ZaharovDm commented 3 years ago

in Firefox image

in Google

image

ZaharovDm commented 3 years ago 
    this.currentContainer = this.parentContainer.append("g")
        .attr("id", data.id)
        .attr("class", className)
        .attr("stroke-opacity", opacity)

this.currentContainer.style('margin')

mbostock commented 3 years ago

You can see what selection.style returns here:

https://github.com/d3/d3-selection/blob/91245ee124ec4dd491e498ecbdc9679d75332b49/src/selection/style.js#L34

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).