Question

Edit: This question can be simplified, and here it goes:

I am adding tryign to add a “circle” to a SVG. Turns out, the added circle is added to the DOM, but not to the svg, and is also not fitted to the scale.

<svg width="400" height="400">
    <g class="x axis" transform="translate(0,200)" fill="none" stroke="black" stroke-width="1" font-size="10px">
    <g class="y axis" transform="translate(200,0)" fill="none" stroke="black" stroke-width="1" font-size="10px">
    <circle fill="#008000" r="10" cy="56" cx="56">
    <circle fill="#008000" r="10" cy="56" cx="128">
    <circle fill="#008000" r="10" cy="56" cx="164">
</svg>
<circle fill="#ffff00" r="10" cy="344" cx="340.4"></circle>

What I am trying to accomplish can be seen here: http://jsfiddle.net/eNe3U/13/

In jsfiddle it works! This is how I want it!

It starts with 3 green circles from a data array from index 0 to 2. Then it gets updated using another dataset, index 1 to 3. This is how the first circle is removed and the last one is added in D3(, right?)

1. moving + changing to red

2. adding a yellow circle

3. removing the first (green) circle. Perfect!

Now, when I try to use this in my visual studio project, adding the yellow circle does not work. I’ve been stuck for quite a while, maybe I have overlooked something or not fully understood the ways of D3.

So, here is my code: http://pastecode.org/index.php/view/66925872

pretty much the same as in the fiddle, just separated in 2 functions. Where is the bug?

 circle.enter().append("circle") // .data(mydata2, function(d) { return d.i; })
      .transition().delay(1000).duration(500)
      .attr("cx", function (d) { return xScale(d.x); })
      .attr("cy", function (d) { return yScale(d.y); })
      .attr("r", 10).attr("fill", "yellow");

Answer 1

circle.enter()…. doesn’t circle point to the svg circle element? shouldn’t it be svg.enter().append(“circle”) so that you append the circle to the svg?