動畫d3js中散點圖的示例

Question

我有一組約1000個點，我想用d3js散點圖。我希望每隔1秒出現約10分。這是否有一個簡單的例子？ d3js教程是詳細的，但我似乎無法找到一個這種情況。

Answer 1

• http://alignedleft.com/tutorials/d3/making-a-scatterplot/和http://bl.ocks.org/bunkat/2595950 - >這個例子給你如何畫出散點圖一個基本的想法！

• http://swizec.com/blog/quick-scatterplot-tutorial-for-d3-js/swizec/5337 - >教程

  您需要了解這些第一！在scatterplot-

• DEMO搗鼓動畫 - >http://jsfiddle.net/eaGhB/3/

   var w = 960,h = 500,nodes = []; 
  
      var svg = d3.select("body").append("svg:svg") 
       .attr("width", w) 
       .attr("height", h); 
  
      var force = d3.layout.force() 
       .charge(-300) 
       .size([w, h]) 
       .nodes(nodes) 
       .on("tick", tick) 
       .start(); 
  
      function tick() { 
       svg.selectAll("circle") 
        .attr("cx", function (d) { return d.x; }) 
        .attr("cy", function (d) { return d.y; }); 
  
      } 
  
      var interval = setInterval(function() { 
       var d = { 
        x: w/2 + 2 * Math.random()-1 , 
        y: h/2 + 2 * Math.random() - 1 
       }; 
  
       svg.append("svg:circle") 
        .data([d]) 
        .attr("r", 10) 
        .transition() 
        .ease(Math.sqrt) 
         .style("stroke", "gray") 
      .style("fill", "red") 
      .attr("r", 10); 
  
       if (nodes.push(d) > 20) { 
        clearInterval(interval); 
        d3.selectAll('circle').on("mouseover", animate).on("mouseout", function() { 
         d3.select(this).transition() 
          .duration(100) 
        .attr("r", 40); 
         d3.selectAll('circle').style("fill", "black"); 
        }); 
       } 
       force.stop() 
       force.start(); 
      }, 200); 
  
  
      function animate() { 
       d3.select(this).transition() 
        .duration(300) 
        .attr("r", 20); 
  
  
       d3.select(this).style("fill", "green"); 
       var sel = d3.select(this); 
       sel.moveToFront(); 
      }; 
      d3.selection.prototype.moveToFront = function() { 
       return this.each(function() { 
        this.parentNode.appendChild(this); 
       }); 
      }; 
  

  • https://github.com/mbostock/d3/wiki/Gallery-->這些都是很多的例子，你可以參考了。