編集: この質問は単純化できます。
SVGに「円」を追加するためにtryignを追加しています。追加された円は 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 に追加される方法です (そうですか?)
移動 + 赤に変化
黄色の丸を追加
最初の (緑の) 円を削除します。完全！
これを Visual Studio プロジェクトで使用しようとすると、黄色の円を追加しても機能しません。私はかなり長い間立ち往生しており、何かを見落としているか、D3 の方法を完全に理解していない可能性があります。
だから、ここに私のコードがあります：http://pastecode.org/index.php/view/66925872
フィドルとほとんど同じですが、2 つの関数に分かれているだけです。バグはどこですか？
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");