How can I append my own SVG object in D3?

Asked Jun 09 '17 at 14:34

Active Jun 09 '17 at 14:34

Viewed 455 times

I can easily append a circle object using D3.js as follow :

var bodySelection = d3.select("body");
var svgSelection = bodySelection.append("svg")
                            .attr("width", 50)
                            .attr("height", 50);

var circleSelection = svgSelection.append("circle")
                            .attr("cx", 25)
                            .attr("cy", 25)
                            .attr("r", 25)
                            .style("fill", "purple");

My question is, is it possible to append my own svg object and how ?

The result should look a little something like this:

var bodySelection = d3.select("body");
var svgSelection = bodySelection.append("svg")
                            .attr("width", 50)
                            .attr("height", 50);

var myObjSelection = svgSelection.append("MyObject")
                            .attr("MyObjectAttribute1", 25)
                            .attr("MyObjectAttribute2", 25)

asked Jun 09 '17 at 14:34

JSmith

4,519
4
29
45

1

You can find the idea here https://stackoverflow.com/questions/21727202/append-dom-element-to-the-d3 – Md Johirul Islam Jun 09 '17 at 14:44
1

sure but your own object won't do anything. – Robert Longson Jun 09 '17 at 14:48
My own object would be for example a specific shape with functionnalities related to it – JSmith Jun 09 '17 at 14:49
2

there's no such thing in SVG, only the elements in the spec are renderable (circle, ellipse, path etc), anything else won't display. – Robert Longson Jun 09 '17 at 15:02
can't I create my specific shape with a path element and add function to it? – JSmith Jun 09 '17 at 15:03
1

Yeah. But you have to use `.append('path')`. – Eric Guan Jun 09 '17 at 15:38
what about the document.registerElement function could this work? – JSmith Jun 09 '17 at 17:00
1

@JSmith SVG will only render the elements in the spec, as Robert Longson already told you. – Gerardo Furtado Jun 10 '17 at 08:28
ok thank you then :). – JSmith Jun 10 '17 at 08:29

How can I append my own SVG object in D3?

0 Answers0