Is XMLSerializer the only way?

Community Help
1

OK so…I’m constructing a thing with d3 using the .data(x).enter() pattern. For each datum in x, the thing that needs to be attached to the DOM is pretty complex. For this reason, I’d like to…

a. …write a function in one cell that takes a datum as an argument, converts that datum into nodes using htl.html and then returns the nodes

b. …then call that function on each datum in another cell to construct the thing…something like data(x).enter().append(d => function_from_other_cell(d) )

I got stuck at the last step in part (b). I couldn’t get the nodes returned from the function attached via d3 in any obvious way. So I read the d3 docs a little closer, and ran into this:

Also, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html. Consider using XMLSerializer to convert a DOM subtree to text. See also the innersvg polyfill, which provides a shim to support the innerHTML property on SVG elements.

So I’ve been able to make this work by creating an XMLSerializer and then running the output of the function through the returned serializer. You can see this happening in this notebook, which demonstrates the pattern in the simplest possible way.

My question is…is XMLSerializer the only way to make this work? (By ‘this’, I mean writing a function in one cell that takes a datum and returns a tree of nodes and then using d3 plus that function in another cell to construct a representation of data).

Thank you!

1 Like
2

How about the following:

{
  const top = htl.html`
    <div>
    <div>
  `
  d3.select(top).select('div').append(() => showCircle(10))
  return top;
}
2 Likes
3

forehead slap :person_facepalming:

1 Like