Question

我正在圈子中显示人物图像，然后点击我用矩形显示他们的数据，如姓名，专业，国家等。

当我点击特定人物的图像时，数据显示为矩形以及矩形左上角的图像。

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

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

请找到以下脚本：

- ＆GT;

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

然后点击你要删除的其他元素：

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

如果这不起作用，您可能想尝试发布jsfiddle，bl.ocks.org或仅发布一些data.json。

在d3.js中隐藏圆圈

1 个答案: