0

チュートリアルを使用してリアルタイムの折れ線グラフを生成しようとしています

http://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/ & http://bost.ocks.org/mike/path/

最初のパスは正常に機能し、svg 折れ線グラフが表示されます。今私がするとき

data.push(ランダム());

// 古いデータ ポイントを前面からポップ data.shift();

// 行を遷移 path.transition().attr("d", line);

何が原因なのかうまくいきません。コード全体は

        var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 1];
        var w = 400,
        h = 200,
        margin = 20,
        y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
        x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])  

        var vis = d3.select("body")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)

        var g = vis.append("svg:g")
                .attr("transform", "translate(0, 200)");    

        var line = d3.svg.line()
            .x(function(d,i) { return x(i); })
            .y(function(d) { return -1 * y(d); })       

        g.append("svg:path").attr("d", line(data));

        g.append("svg:line")
                .attr("x1", x(0))
                .attr("y1", -1 * y(0))
                .attr("x2", x(w))
                .attr("y2", -1 * y(0))

        g.append("svg:line")
                .attr("x1", x(0))
                .attr("y1", -1 * y(0))
                .attr("x2", x(0))
                .attr("y2", -1 * y(d3.max(data)))

        g.selectAll(".xLabel")
        .data(x.ticks(5))
        .enter().append("svg:text")
        .attr("class", "xLabel")
        .text(String)
        .attr("x", function(d) { return x(d) })
        .attr("y", 0)
        .attr("text-anchor", "middle")

        g.selectAll(".yLabel")
                .data(y.ticks(4))
                .enter().append("svg:text")
                .attr("class", "yLabel")
                .text(String)
                .attr("x", 0)
                .attr("y", function(d) { return -1 * y(d) })
                .attr("text-anchor", "right")
                .attr("dy", 4)

        g.selectAll(".xTicks")
        .data(x.ticks(5))
        .enter().append("svg:line")
        .attr("class", "xTicks")
        .attr("x1", function(d) { return x(d); })
        .attr("y1", -1 * y(0))
        .attr("x2", function(d) { return x(d); })
        .attr("y2", -1 * y(-0.3))

        g.selectAll(".yTicks")
                .data(y.ticks(4))
                .enter().append("svg:line")
                .attr("class", "yTicks")
                .attr("y1", function(d) { return -1 * y(d); })
                .attr("x1", x(-0.3))
                .attr("y2", function(d) { return -1 * y(d); })
                .attr("x2", x(0))

        setInterval(function() {
            data.push(10);
            data.shift();
            g.attr("d", line)
                .attr("transform", null)
                  .transition()
                    .ease("linear")
                    .attr("transform", "translate(" + x(-1) + ")");
            alert('yaho1');
        }, 2000);
    });

この新しいコードでコードを更新した後

var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 10];
            var w = 400,
            h = 200,
            margin = 20,
            y = d3.scale.linear().domain([0, 10]).range([0 + margin, h - margin]),
            x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])  

            var vis = d3.select("body")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)

            var g = vis.append("svg:g")
                    .attr("transform", "translate(0, 200)");    

            var line = d3.svg.line()
                .x(function(d,i) { return x(i); })
                .y(function(d) { return -1 * y(d); })       

            g.append("svg:path").attr("d", line(data));

            g.append("svg:line")
                    .attr("x1", x(0))
                    .attr("y1", -1 * y(0))
                    .attr("x2", x(w))
                    .attr("y2", -1 * y(0))

            g.append("svg:line")
                    .attr("x1", x(0))
                    .attr("y1", -1 * y(0))
                    .attr("x2", x(0))
                    .attr("y2", -1 * y(d3.max(data)))

            g.selectAll(".xLabel")
            .data(x.ticks(5))
            .enter().append("svg:text")
            .attr("class", "xLabel")
            .text(String)
            .attr("x", function(d) { return x(d) })
            .attr("y", 0)
            .attr("text-anchor", "middle")

            g.selectAll(".yLabel")
                    .data(y.ticks(4))
                    .enter().append("svg:text")
                    .attr("class", "yLabel")
                    .text(String)
                    .attr("x", 0)
                    .attr("y", function(d) { return -1 * y(d) })
                    .attr("text-anchor", "right")
                    .attr("dy", 4)

            g.selectAll(".xTicks")
            .data(x.ticks(5))
            .enter().append("svg:line")
            .attr("class", "xTicks")
            .attr("x1", function(d) { return x(d); })
            .attr("y1", -1 * y(0))
            .attr("x2", function(d) { return x(d); })
            .attr("y2", -1 * y(-0.3))

            g.selectAll(".yTicks")
                    .data(y.ticks(4))
                    .enter().append("svg:line")
                    .attr("class", "yTicks")
                    .attr("y1", function(d) { return -1 * y(d); })
                    .attr("x1", x(-0.3))
                    .attr("y2", function(d) { return -1 * y(d); })
                    .attr("x2", x(0))

            setInterval(function() {
                    var number = Math.round(Math.random()*10) + 1;
                    data.push(number);
                    data.shift();
                    g.selectAll("path")
                    .attr("d", line(data))  // <-- line(data) instead of data
                    .attr("transform", null)
                        .transition()
                            .ease("linear")
                            .attr("transform", "translate(" + x(-1) + ")");
            },
            200);

私は望むようにほぼ同じ動作をします.しかし、私はいくつかの問題があります

ここに画像の説明を入力

ご覧のとおり、新しいデータをランダムに生成してプッシュし、前面にポップします。そして図形を描いてみると、線が左側のy軸である境界を横切っています。コードで何が問題になっていますか? どうすればこれを修正できますか?

4

1 に答える 1

2

インターバルの割り当てにエラーがあります.attr("d", ___ )。d3ライン関数が処理できるデータを指定する必要があります。

これを試して：

setInterval(function() {
    data.push(10);
    data.shift();
    g.selectAll("path")
    .attr("d", line(data))  // <-- line(data) instead of data
    .attr("transform", null)
      .transition()
        .ease("linear")
        .attr("transform", "translate(" + x(-1) + ")");
},
2000);

この修正を使用してコードを試したところ、機能しました。

于 2012-10-30T07:47:42.393 に答える