在d3.js中隐藏圆

我在圆圈中显示人们的图像，并单击圆圈，以矩形显示他们的数据，如姓名、职业、国家等

当我点击特定人物的图像时，数据显示在矩形中，图像位于矩形的左上角

在矩形的右上角有一个十字按钮，当我点击它时，我会删除文本和矩形，但左上角的圆圈仍然存在，我也可以删除它

下面是JSFIDLE链接：所以，若你们检查一下圆形的点击事件，我会在矩形后面的g元素后面附加一个半径为“50”的圆形。点击一个像十字图标一样的小圆，我想删除半径为50的圆

请在下面查找脚本：

-->

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

 });



})

---

谢谢

保存对要删除的圆的引用：

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

然后将其删除，然后单击要删除的其他元素：

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

---

如果这不起作用，您可能想尝试发布一个jsfiddle、bl.ocks.org，或者只是发布一些

data.json

是的，它起作用了：）。这个圆也充满了图像。矩形的背景是红色。奇怪的是，红色背景也作为图像的一部分出现了。如何确保圆位于矩形上方？。你能帮个忙吗？我不太明白；如果您编辑了fiddle以包含部分data.json，我可能会看到您在说什么？（现在没有显示任何内容）