Question

所以我有这个d3文件，我最初有3个圆圈。我想添加第4个，但添加的第四个没有显示。此外，由于某种原因，无法删除添加的圆圈。有什么帮助吗？

    <!DOCTYPE HTML>
    <meta charset="utf-8">
    <style>
    path {
      stroke: white;
      stroke-width: 0.25px;
      fill: grey;
    }
    </style>
    <html>
    <body>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>

    var time = new Date(); 
    var width = 500,
        height = 300;
    var projection = d3.geo.mercator()
        .center([0, 5 ])
        .scale(200)
        .rotate([-180,0]);
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);


    svg.append('svg:image')
          .attr({
            'xlink:href': 'http://cdn.graphicsfactory.com/clip-art/image_files/tn_image/1/1329161-tn_cat-2.jpg',  // can also add svg file here
            x: 50,
            y: 150,
            width: 100,
            height: 100
          });

    svg.append('svg:image')
          .attr({
            'xlink:href': 'http://cdn.graphicsfactory.com/clip-art/image_files/tn_image/1/1329161-tn_cat-2.jpg',  // can also add svg file here
            x: 400,
            y: 150,
            width: 100,
            height: 100
          });


    var path = d3.geo.path()
        .projection(projection);
    var g = svg.append("g"); 

    var jsonCircles = [
      { "name": "1" , "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
      { "name": "2" , "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
      { "name": "3" , "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];


    function rand_it(x){
    return Math.floor((Math.random() * x) + 1);
    };

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };


    function randH(){
      return getRandomInt(150, 250);
    };

    function generate_data(){


        var jsonCircles2 = [
          { "name": "1" , "x_axis": rand_it(width)-10, "y_axis": rand_it(height)-10, "radius": rand_it(20), "color" : "green" },
          { "name": "2" , "x_axis": rand_it(width)-10, "y_axis": rand_it(height)-10, "radius": rand_it(20), "color" : "purple"},
          { "name": "3" , "x_axis": rand_it(width)-10, "y_axis": rand_it(height)-10, "radius": rand_it(20), "color" : "red"},
          { "name": "4" ,"x_axis": rand_it(width)-10, "y_axis": rand_it(height)-10, "radius": rand_it(20), "color" : "blue"}];

          return jsonCircles2;
    };

    var time = new Date(); 
    var circles = svg.selectAll("circle")
                  .data(jsonCircles, function(d) {
                                            console.log("Here I am: " + time, d );
                                            return d.name;});

    circles.enter()
           .append("circle")
           .attr("cx", function (d) { return d.x_axis; })
           .attr("cy", function (d) { return d.y_axis; })
           .attr("r", function (d) { return d.radius; })
           .style("fill", function(d) { return d.color; });




    function move_right(data){
        var timeU = new Date();
        var duration = 1000;
        var delay = 0;

        // join data
        circles.data(data, function(d, i) {
                                        console.log("\n\n Here I am Updated: " + timeU, i, d.name);
                                        return d.name;});


        // Update
        circles
            .transition() // this is to create animations
            .duration(duration)
            // .delay(function(d, i) {delay = i * .5; return delay;}) 
            .ease("linear")
            .attr("cx", function (d) { return 500; })
            .attr("cy", function (d) { return randH(); })
            .attr("r", function (d) { return d.radius; })
            .style("fill", function(d) { return d.color; });
            // .style('opacity', 0);

        // enter
        circles.enter().append('circle')
            .attr("cx", function (d) { return 150; })
            .attr("cy", function (d) { return randH(); })
            .attr("r", function (d) { return d.radius; })
            .style("fill", function(d) { return d.color; })
            .style('opacity', 0)
            .transition()
              .duration(duration * 1.2)
              .style('opacity', 1);


        // exit old
        circles.exit()
          .transition()
          .duration(duration*2)
          .style('opacity', 0)
          .remove();          

    }



    // move_right(jsonCircles)

    setInterval(function(){
      console.log("\n\n\n\n\n\n\n");

      var data = generate_data();
      move_right(data);
      console.log("\n\n\n\n\n\n\n");
    }, 3000);


    </script>
    </body>

数据元素未正确更新（添加的其他元素未显示+删除不起作用）

0 个答案: