1

以下のコードでレンダリングされる非常に単純な線グラフがあります。アイテムをデータ配列にプッシュしてからグラフを再描画するための簡単なタイマーを作成しました。問題は、グラフが再描画されていないことです。期待どおりにライン関数が1.5秒ごとに呼び出されていることがわかりますが、グラフは再描画されていません。

私はさまざまなことを試し、SOでこれに似た以前の質問に対する回答のいくつかをたどろうとしましたが、行き詰まっています。

    var data = getData();
    var graph;
    var line;

    function getData() {
        var arr = [];
        for (var x = 0; x < 30; x++) {
            arr.push(rand(100));
        }
        return arr;
    }

    function rand(max) {
       return Math.floor(Math.random() * (max + 1))
    }

    setInterval(function() {
        data.shift();
        data.push(rand(100));
        redraw();
    }, 1500);

    function redraw() {
        graph.select("svg path")
             .data([data])
             .attr("d", line);
    }

    var m = [80, 80, 80, 80]; // margins
    var w = 1000 - m[1] - m[3]; // width
    var h = 400 - m[0] - m[2]; // height

    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
    var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

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

    graph = d3.select("#graph").append("svg:svg")
              .attr("width", w + m[1] + m[3])
              .attr("height", h + m[0] + m[2])
              .append("svg:g")
              .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

    var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
    graph.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + h + ")")
          .call(xAxis);


    var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
    graph.append("svg:g")
          .attr("class", "y axis")
          .attr("transform", "translate(-25,0)")
          .call(yAxisLeft);

    graph.append("svg:path")
         .data([data])         
         .attr("d", line);
4

1 に答える 1

2

問題は、セレクターの「svgパス」が十分に具体的ではないことです。これは、軸によって描画されるドメインパスと一致します。これは、2つの方法のいずれかで修正できます。追加するときに、ラインパスへの参照を保存することができます。

var path = graph.append("path")
    .datum(data)
    .attr("d", line);

または、特定のクラス（ "line"）を割り当ててから、より具体的なセレクター（ ".line"）を使用することもできます。これにより、スタイリングも簡単になります。

graph.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);
于 2012-09-23T01:13:05.517 に答える