Скрыть Круг в 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"); 
     }) 

}); 



}) 

Благодаря

Answer 1

Сохранить ссылку на круг, который вы хотите удалить:

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

И удалить его OnClick с другими элементами, которые вы хотите, чтобы избавиться от:

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

Если не работает, вы можете попробовать опубликовать jsfiddle, bl.ocks.org или просто некоторые из ваших data.json.