CODEWITHSUNDEEP
javascriptsvgd3.js
praks5432
praks5432

Reputation: 7792

Adding SVG elements on click of other elements

I have some circles made in d3. I need to add more circles when these circles are clicked and make the existing circles disappear(they should not be removed as I will use them again).

The way I'm doing this right now is through a listener to a click event on the original circles. (these are created with .selectAll('circle.nodes')

.on("click",function(d){
  //do stuff}).duration(1000);
   populateSubCircles);

I want the sub circles to appear around a center (I looked at my calculations and they seem to be correct). 

  var populateSubCircles = function(){
    var subCircles = nodesG.selectAll("circles.subNodes").data(....

This correctly adds the secondary circles, and cx and cy seem to be correct(not too far off from the center circle). However, they don't seem to appear on the page(they appear at the top left at 0,0). Why is that happening? How do I fix that?

Thanks.

EDIT- A picture or two may help.

what I see under inspect element

what I see in the browser

Upvotes: 1

Views: 170

Answers (1)

WiredPrairie
WiredPrairie

Reputation: 59763

It's likely that you don't have the radius set on the circles (it must be set explicitly on the circle element, and cannot be set via CSS, as only style properties such as fill, stroke, etc., can be set) .

As you can see, one svg circle shows normally when set with a radius (r) of 25, and the other does not, and its size is correctly reported as 0px x 0px. (The tooltip reports size, not position). Here's the SVG I used:

<svg>
    <circle cx="100" cy="100" fill="#ffdf00" 
         stroke="#222222" stroke-width="2px" />
    <circle cx="50" cy="50" fill="#ffdf00" r="25" 
         stroke="#222222" stroke-width="2px" />
</svg>

This image shows the second of two circles, using inspector in Chrome web tools, it correctly reports the size:

52px x 52px

Again, using inspector in Chrome, highlighted the first SVG element where no radius was set:

0px x 0px

It shows the size as 0px x 0px and shows the circle as if it were in the upper left corner of the SVG document.

http://jsfiddle.net/wiredprairie/gNrZ3/

Upvotes: 2

Related Questions