1

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

当我单击特定人的图像时，数据显示在矩形中以及矩形左上角的图像中。

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

下面是 Jsfiddle 链接：因此，如果您检查圆的单击事件，我将在矩形后的 g 元素上附加一个半径为“50”的圆。单击像十字图标一样的小圆圈，我想删除半径为 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");
      })

 });



})

谢谢

4

1 回答 1

0

保存对要删除的圈子的引用：

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.

于 2013-07-16T06:24:16.987 回答