Modifying inline styles fails sometimes

1

https://beta.observablehq.com/@1wheel/inline-markdown-charts

  // Changing c.svg's inline style from absolute to relative doesn't work
  c.svg.st({position: 'relative'})
  c.svg.style('position', 'relative')
  
  console.log(c.svg.style('position'))  // relative
  console.log(d3.select(node).select('svg').style('position')) // Back to absolute!!

  // This does work? Comment out to see chart overlapping with text above
  d3.select(node).select('svg').st({position: 'relative'})
  
  console.log(d3.select(c.sel.node()).style('position'))  // relative

Not sure why reselecting would make any difference.

2

This appears to be a d3-jetpack issue and was fixed (by you!) in 2.0.16. If you upgrade from 2.0.15 the problem goes away. Try replacing your d3 cell as follows:

d3 = require("d3-jetpack@2.0.16/build/d3v4+jetpack.js")

The reason that this line doesn’t work:

c.svg.st({position: 'relative'})

Is that c.svg is the G element, not the parent SVG element. So you’re getting this:

<svg width="100" height="18" style="position: absolute;">
  <g transform="translate(0,0)" style="position: relative;">
    …
  </g>
</svg>

This line works fine:

d3.select(node).select('svg').st({position: 'relative'})
1 Like
3

oh dear. That’s what I get for filing an issue after midnight!

3 Likes