d3js古いデータを除外します

私はd3jsで作業していますが、データを更新する方法がわかりません。私は10個のサークルだけを表示しようとしています。データが10以上になるたびに、最も古いものをプッシュして新しいサークルを描画します。d3js古いデータを除外します

私はdataset.splice（0,1）を試してからデータをプッシュしましたが、グラフは応答していません。私の推測では、d3jsでfilterメソッドを使用することを想定していないと思いますが、それを動作させる方法はわかりません。

w = 800; 
 
h = 300; 
 
var svg = d3.select("#target").append("svg").attr({ 
 
    class: "space-screen", 
 
    height: h, 
 
    width: w 
 
}); 
 

 
var dataSet = new Array(); 
 
var counter = 0; 
 

 
function addData() { 
 
    dataObj = { 
 
    date: new Date(), 
 
    count: counter 
 
    }; 
 
    counter++; 
 

 
    if (dataSet.length >= 10) { 
 
    dataSet.splice(0,1); 
 
    } 
 
    dataSet.push(dataObj); 
 
    var circle = svg.selectAll("circle").data(dataSet); 
 
    circle.exit().remove(); 
 
    circle.enter().append("circle").attr({ 
 
    cx: function(d, i) { 
 
     return i * 50 + 50 
 
    }, 
 
    cy: h/2, 
 
    r: function(d) { 
 
     return d.count * 5; 
 
    }, 
 
    fill: "blue" 
 
    }); 
 
} 
 
setInterval(addData, 500);

.space-screen { 
 
    background-color: #fefefe; 
 
}

<body> 
 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
    <p>D3 test</p> 
 
    <div id="target"></div> 
 
</body>

出典

2016-04-09 hiroto

あなたは選択exit（）を使用してたび。（削除）あなたはユニークとしてデータをマークするためのキーを定義する必要があります。

これの代わりに;

var circle = svg.selectAll("circle").data(dataSet);

それはこれがそれを解決しhere

出典

2016-04-09 11:00:52 Cyril

var circle = svg.selectAll("circle").data(dataSet, function(d){ return d.date.getTime();});

実施例でなければなりません！どうもありがとうございます！これを記述する情報源はありますか？私はあなたがデータを一意であるとマークするためのキーを定義できることは決して知りませんでした。 – hiroto

ここはhttps://github.com/mbostock/d3/wiki/Selections#dataです。キーセクションを読んでください。 – Cyril

ありがとうございます！あなたは私の人生を救った – hiroto

d3js古いデータを除外します

答えて

関連する問題