Question

出于测试目的，我正在尝试制作水平条形图，以实时更改数据。我注意到节点不断增加。

var dataset = [ 5, 10, 15, 20, 25 ]
var w = 1200;
var h = 500;
var barPadding = 1;
var container = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h)
  .append("g");

var rects = container.selectAll("rect")

var yScale  = d3.scaleLinear()
  .range([h, 0])

function draw(dataset, translate){

  yScale.domain([0, d3.max(dataset)])
  rects.data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i){
    return i * 12 + translate
  })
    .attr("y", function(d){
    return yScale(d)
  })
    .attr("width", 11)
    .attr("height", function(d) { return (h - yScale(d)) })

  rects.exit().remove()

}

var translate = 0

setInterval(function(){

  container.attr("transform", "translate("+-translate+",0)")
  dataset.push(Math.floor(Math.random() * 30))
  draw(dataset, translate)
  translate = translate + 12
  dataset.shift()
}, 1000)

rects.exit.remove()似乎不起作用，该如何解决？我在d3 v5上找不到实时水平条形图的任何示例，这就是我在这里使用的

Answer 1

现在您没有正确的更新选择，即：

var rects = container.selectAll("rect")
    .data(dataset);

因此，所有矩形都属于enter选择。

这是更新的代码，在控制台中具有更新选择的大小：

var dataset = [5, 10, 15, 20, 25]
var w = 500;
var h = 300;
var barPadding = 1;
var container = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h)
  .append("g");

var yScale = d3.scaleLinear()
  .range([h, 0]);

var translate = 0

draw(dataset, translate)

function draw(dataset, translate) {

  yScale.domain([0, d3.max(dataset)])
  var rects = container.selectAll("rect")
    .data(dataset);

  rects.enter()
    .append("rect")
    .merge(rects)
    .attr("x", function(d, i) {
      return i * 12 + translate
    })
    .attr("y", function(d) {
      return yScale(d)
    })
    .attr("width", 11)
    .attr("height", function(d) {
      return (h - yScale(d))
    })

  rects.exit().remove();

  console.log("the update size is: " + rects.size())

}

setInterval(function() {
  container.attr("transform", "translate(" + -translate + ",0)")
  dataset.push(Math.floor(Math.random() * 30))
  draw(dataset, translate)
  translate = translate + 12
  dataset.shift()
}, 1000)

<script src="https://d3js.org/d3.v5.min.js"></script>

实时水平条形图不断添加节点

1 个答案: