[Solved]-how to create circles with text over svg file using d3 js?-d3.js

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 :)