Question

我正在研究d3js，我不确定如何更新数据。我试图只显示10个圆圈，每当数据超过10时，它会推出最旧的圆圈并绘制新的圆圈。

我尝试了dataset.splice（0,1），然后将数据推入，但图表没有响应。我的猜测是你不应该这样做，在d3js上使用过滤器方法，但我不知道如何让它工作。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

每当使用选择exit（）。remove（）时，您应该定义一个键，将数据标记为唯一。

所以不要这样;

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

应该是

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

工作示例here

d3js过滤掉旧数据

1 个答案: