1

d3jsでプロットを散布したい約1000点のセットがあります。0.1 秒ごとに約 10 ポイントが表示されるようにします。これの簡単な例はどこかにありますか？d3js チュートリアルは詳細ですが、この場合のチュートリアルが見つからないようです。

4

1 に答える 1

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);
        });
    };
于 2013-07-14T04:41:41.770 に答える