10

I'm using d3 for graphing, and I'm trying to create an svg object, to add to the DOM later.

I used to have

var svg = d3.select(el).append("svg");
var graph = svg.append("g")
...etc...

and for reasons I won't go into, I wanted to create the svg element before appending it to the DOM.

So I did

var svg = d3.select(document.createElementNS(d3.ns.prefix.svg, 'svg'))
var graph = svg.append("g")
...etc...

, which works, and while debugging, I can see that svg is a 1-element array, with the children nicely attached.

The problem comes at the append step:

d3.select(el).append(svg);

There, I get an error Error: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('[object SVGSVGElement]') contains the invalid name-start character '['. I've taken a look here: How to create "svg" object without appending it? but it seems that's exactly how they suggest it.

Any idea why this is so? I've tried appending svg[0], but no luck either. It seems append() only takes strings as an argument.


edit: the d3 reference at https://github.com/mbostock/d3/wiki/Selections#append states

selection.append(name) ... ... ... "The name may be specified either as a constant string or as a function that returns the DOM element to append."

Consequently I've tried

d3.select(el).append(function(){return svg;});

but that fails with a Error: Failed to execute 'appendChild' on 'Node': The new child element is null.

1
  • Well, why would you append an svg you already created?
    – Union find
    Aug 27, 2014 at 3:18

2 Answers 2

16

If svg is a selection, svg.node() returns the DOM element, e.g.:

d3.select(el).append(function(){return svg.node();});

(Mind you, I'm not certain that svg in your case is a true selection, but you could give it a try.)

0
4

You might be better off using the regular element.appendChild function for this.

You can get a reference to your parent element using d3.select(el).node() then, you can call .appendChild on that, passing in svg.node() as the element to append.

So, all together:

d3.select(el).node().appendChild(svg.node());
1
  • Actually, I just tested it and the method suggested by @StephenThomas seems to work just fine, so there's no need to fall back to the DOM method. I'll leave this up as an alternate anyways.
    – jshanley
    Aug 27, 2014 at 4:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.