javascript - 在 d3js 中动画散点图的示例

Question

我有一组大约 1000 个点，我想用 d3js 对其进行散点图。我希望每 0.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 -->教程

  你需要先了解这些!!!

• 用于散点图中动画的 DEMO FIDDLE---> 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-- >这些都是很多例子，您也可以引用。