在d3js中设置散点图动画的示例

时间:2013-07-14 03:29:38

标签: javascript d3.js

我有一套大约1000点,我想用d3js散布情节。我希望每0.1秒出现约10分。这个地方有一个简单的例子吗? d3js教程很详细,但我似乎找不到这个案例。

1 个答案:

答案 0 :(得分: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);
            });
        };