D3:追加圈不工作-一定是缺少了什么

编辑:这个问题可以简化，下面是:

我正在添加尝试添加一个"圆"到SVG。结果是，添加的圆圈被添加到DOM中，而不是添加到svg中，并且也不适合比例。

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

我想要完成的可以在这里看到:http://jsfiddle.net/eNe3U/13/

在jsfiddle它工作!这就是我想要的!

从索引0到2的数据数组中开始有3个绿色圆圈。然后使用另一个数据集(索引1到3)更新它。这就是为什么第一个圆圈被删除，最后一个圆圈被添加到D3(，对吗?)

1. 移动+变为红色

2. 添加黄色圆圈

3. 移除第一个(绿色)圆。完美!

现在，当我尝试在我的visual studio项目中使用它时，添加黄色圆圈不起作用。我已经被困了很长一段时间，也许我忽略了一些东西，或者没有完全理解D3的方式。

下面是我的代码:http://pastecode.org/index.php/view/66925872

与小提琴中的基本相同，只是分为两个函数。虫子在哪里?

 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");