d3.js - d3.js で円を非表示にする

Question

人々の画像を円で表示し、名前、職業、国などの長方形でデータを表示しているをクリックしています.

特定の人物の画像をクリックすると、データが長方形の左上隅にある画像とともに長方形に表示されます。

長方形の右上隅に十字ボタンがあり、クリックするとテキストと長方形が削除されますが、左上隅の円は引き続き削除できます。

以下はJsfiddleのリンクです。したがって、円のクリックイベントをチェックすると、半径「50」の円が長方形の後のg要素に追加されます。十字アイコンのように機能している小さな円をクリックすると、半径50の円を削除したい.

http://jsfiddle.net/c7UT2/1/

以下のスクリプトを見つけてください。

-->

var width = 960,
height = 500;

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)

d3.json("data.json", function (json) {
    /* Define the data for the circles */
    var elem = svg.selectAll("g myCircleText")
    .data(json.nodes)

    /*Create and place the "blocks" containing the circle and the text */
    var elemEnter = elem.enter()
    .append("g")
    .attr("transform", function (d) { return "translate(" + d.x + ",180)" })

    /*Create the circle for each block */
    var circle = elemEnter.append("circle")
    .attr("r", function (d) { return d.r })
    .attr("stroke", "black")
    .attr("fill", "white")
    .style("fill", "url(#image)")



    .on("click", function (d) {

        var g = svg.append("g")
        .attr("transform", "translate(50,50)");

       g.append("rect")
      .attr("width", 200)
      .attr("height", 200)
      .style("fill", "#E6EFFA")


      .transition()
       .duration(750)
      .attr("width", 500)
      .attr("height", 500)
      .each("end", function () {

       g.append("circle")
       .attr("r", "50")
       .attr("stroke", "black")
       .attr("fill", "blue")
       .style("fill", "url(#image)");

          g.append("text")
         .attr("dx", "200")
         .attr("dy", "200")
            .text(d.info);


          g.append("text")
       .attr("dx", "200")
       .attr("dy", "300")
       .text(d.country);

          g.append("circle")
         .attr("r", "15")
         .attr("cx", "505")
         .attr("cy", "6")
         .style("fill", "blue")

       .on('click', function () {
           d3.selectAll("rect").remove();
           d3.selectAll("text").remove();
           d3.select(this).remove();

       })

          g.append("text")
       .attr("dx", "500")
       .attr("dy", "8")
       .text("x");
      })

 });



})

ありがとう