foreignObject: where does the namespace go?

Community Help
1

I’m trying to put some html into svg via foreignObject via d3 in a notebook.

The d3 docs (here) say that I need to use the namespace method to do this. But I’m not smart enough to tell from the docs exactly how to use namespace method in this particular case.

Say I have a cell in my notebook like this:

{
const svg = d3.create("svg")
  .append("foreignObject")
    .attr("width", 300)
    .attr("height", 100)
  .append("xhtml:div")
    .html("<table><thead><th>A</th><th>B</th></thead></table>");
return svg.node()
}

Where exactly in this code do I need to add d3.namespace() to make it work??? And what argument do I need to pass to d3.namespace()?

2

It’s fine, but you have to return the svg node, and not the div (which you obtained by chaining the calls).

{
  const svg = d3.create("svg");
  svg
    .append("foreignObject")
    .attr("width", 300)
    .attr("height", 100)
    .append("xhtml:div")
    .html("<table><thead><th>A</th><th>B</th></thead></table>");
  return svg.node();
}

PS: for questions about D3 we’re now moving to github discussions, in order to build a better knowledge base. See you there!