how to create circles with text over svg file using d3 js?

Question

I am a beginner to d3 js. I have a div that contains a object tag having svg file.
I need to create circle with texts over that svg file and bind click functions over them using d3 js.
Thanx in advance. Below is my html code:

<div class="span8 canvasDiv">
    <object data="img/floor.svg" type="image/svg+xml" id="floorCanvas"></object>
</div>

JS Code:

var svgContainer = d3.select("#floorCanvas");
var circle = svgContainer.append("circle")
                         .attr("cx", 30)
                         .attr("cy", 30)
                         .attr("r", 20);

possible duplicate of [d3 add text to circle](http://stackoverflow.com/questions/13615381/d3-add-text-to-circle) — thatOneGuy, Jun 01 '15 at 08:14
@thisOneGuy: your reffred question is creating svg tag. but in my case i have an svg tag inside object tag. — Rahul Munjal, Jun 01 '15 at 08:17

score 0 · Answer 1 · edited Jun 01 '15 at 08:26

0

youll need to create a 'g' tag then append both the circle and the text to that 'g' as you cant append text directly to an svg shape so something like this (not tested) :

HTML :

 <div class="span8 canvasDiv">
        <object data="img/floor.svg" type="image/svg+xml" id="floorCanvas"></object>
        </div>

JS Code:-

 var svgContainer = d3.select("#floorCanvas").append('svg').append('g').attr('id', 'circleWithText');
 var circleWithText = d3.select("#circleWithText");

 circleWithText .append("circle")
                .attr("cx", 30)
                .attr("cy", 30)
                .attr("r", 20);

 circleWithText.append('text')
                .attr('class', 'text')
                .attr("dx", "0")
                .attr("dy", "0")
                .text('what ever you want here');

CSS

.text{
    text-anchor: middle;
    color: steelblue;
    position:relative;
    font: 14px Calibri;
}

Something along those lines :)

edited Jun 01 '15 at 08:26

Rahul Munjal

2,551
2
15
35

answered Jun 01 '15 at 08:10

thatOneGuy

9,977
7
48
90

Thanx for your code. I was able to add text over the svg file. But the circle is not visible. Its tag has been created but not visible. – Rahul Munjal Jun 01 '15 at 08:15
why are you using an object tag ? – thatOneGuy Jun 01 '15 at 08:19
Well, I found no other way except object tag and embed tag for loading svg file. – Rahul Munjal Jun 01 '15 at 08:20
displayed the circle using this : `var svgContainer = d3.select("#floorCanvas").append('svg').append('g').attr('id', 'circleWithText');` – Rahul Munjal Jun 01 '15 at 08:24
and all you want to is display a circle ? how come you have image link in the object tag ? What i would say is dont use object use svg instead – thatOneGuy Jun 01 '15 at 08:25
Can i load my svg file inside svg tag ? – Rahul Munjal Jun 01 '15 at 08:26
yeah dont see why not – thatOneGuy Jun 01 '15 at 08:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79294/discussion-between-rahul-munjal-and-thisoneguy). – Rahul Munjal Jun 01 '15 at 08:29

how to create circles with text over svg file using d3 js?

1 Answers1