DOM.svg is deprecated

Community Help
1

for short creating svg in cells i’m using next code:

{
  d3.select(DOM.svg(width,200));
  // some inner code
  return svg.node()
}

but if DOM.svg is deprecated, what right code construction now?
svg... or html... is not good solution in this case

2

It’s not deprecated in my book?

Here’s an alternative using d3-selection:

d3.create("svg").attr("viewBox", [0, 0, width, 200]).node()

And the svg tagged template literal:

svg`<svg viewBox="0 0 ${width} 200">`
3

right, as long as it works!
but look to @observablehq/stdlib ##deprecated section

compare alternative length code on input

d3.select(DOM.svg(width,200));

and

d3.create("svg").attr("viewBox", [0, 0, width, 200])

:face_with_raised_eyebrow:

4

I recommend to try htl which allows you to specify attributes in may different ways, for example:

htl.svg`<svg ${{width, viewBox: [0, 0, width, 200]}}>`
// or
htl.svg`<svg width=${width} viewBox="0 0 ${width} 200">`

Both template literals html and svg have been superseded by htl.html and htl.svg. They will at some point become the new default, but we can’t make that change just yet.

You may have encountered notebooks that have adopted the following pattern to replace the old template tag with the new one:

html = htl.html
5

i simply cannot understand it!
i’m using next code for quick svg definition and data manipulations:

  const svg=d3.select(DOM.svg(width,200)),
    g=svg.append("g");

    g.selectAll().data(myData)
    .join("circle")
    ...

  return svg.node()
}

if DOM.svg deprecated, i need replace DOM.svg in this code to

{ 
  const svg=d3.select(htl.svg`<svg ${{width, viewBox: [0, 0, width, 200]}}>`),
    g=svg.append("g");

    g.selectAll().data(myData)
    .join("circle")
    ...

  return svg.node()
}

? :disguised_face:

6

Right now you don’t need to replace anything. Deprecated simply means that we won’t provide support for these methods and suggest that you consider alternatives.

As far as I’m aware there are currently no concrete plans to remove any of them, and we would certainly ensure that removing them won’t break existing notebooks.

You can read up on the reasoning in this issue:

1 Like
7

By the way: If you need DOM.svg() so frequently that writing anything slightly longer becomes a burden, then I recommend to create your own toolbox notebook. This will let you define even more concise shorthands that you can adapt to your preference and import into your notebooks:

import {newSvg} from "@igor-a1/tools"
1 Like
8

thank you, now the reasons have become clear.
i will do as you suggested