2

5秒ごとに更新をチェックし、必要に応じて線/スケールを再描画する単純な折れ線グラフがあります。これはすべて、データポイントのドットを除いてうまく機能します。

ドットを移動するための再描画で何が欠けていますか? ドットは、グラフが最初にレンダリングされたときに表示されます。ただし、更新時に、線が再描画されても移動しません。そのため、更新時に新しいデータ ソースを選択しましたが、古いデータ ポイントは固定されたままです。

更新時に再描画

var svgAnimate = d3.select("#animateLine").transition();

        svgAnimate.select(".line") // change the line
            .duration(750)
            .attr("d", valueline(data));
        svgAnimate.selectAll(".circle") // change the circle
            .duration(750)
            .attr("d", valueline(data));
        svgAnimate.select(".x.axis") // change the  x axis
            .duration(750)
            .call(xAxis);
        svgAnimate.select(".y.axis") // change the y axis
            .duration(750)
            .call(yAxis);

初期図面:

svgAnimate.selectAll("dot")
        .data(data)
    .enter().append("circle")
        .attr("class", "circle")
        .attr("r", 5)
        .style("fill", function(d) { 
            if (d.close <= 400) {return "red"} 
            else { return "black" }
        ;})
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.close); })

これは私が望んでいないことです。 ここに画像の説明を入力

4

2 に答える 2

3

あなたの問題は、関数valueLineが線を描くために使用する関数であることです。したがって、新しいデータで再度呼び出すと、線が再描画されます。

円の場合、この属性dには意味がありません。ただし、y軸が変わらないと考えると、次のようなことができます。

svgAnimate.selectAll(".circle") // change the circle
    .data(newData)
    .duration(750)
    .attr("cx", function(d){return x(d.date)};

y座標を変更する必要がある場合cyは、円の属性を変更する必要があります。

私のコードは必要なほど厳密ではないかもしれません。それでも問題がある場合は、jsFiddle を投稿してください。

于 2013-04-16T02:26:25.590 に答える
0

チャートの円の更新にも問題がありました。これは機能するフィドルであり、同じ問題がある場合、将来の検索のために何人かの人々がいるかもしれません: http://jsfiddle.net/noo8k17n/

問題は次の行です。

var svgAnimate = d3.select("#animateLine").transition();

削除する必要があり、更新メソッドで円を追加および削除できます。

于 2014-11-17T13:40:40.807 に答える