Question

我做了一个应该删除现有数据点的函数（取决于查询），但是以前的数据点仍然存在于图形上。在过渡新数据点之前如何删除现有数据点？

var dot = svg
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.state); } )
.attr("cy", function (d) { return y(d.number); } )
.attr("r", 5)
.style("fill", "blue")

function update(selectedGroup) {

var updateData = data.filter(function(d){ 
  if ( selectedGroup === "VIC" ) {
    return d.state === "VIC"
  } else if (selectedGroup === "NSW") {
  return d.state === "NSW"
  } else {
    return data
  }
});

dot
  .data(updateData)
  .transition()
  .duration(1000)
    .attr("cx", function(d) { return x(+d.state) })
    .attr("cy", function(d) { return y(+d.number) })

}

d3.select("#VIC")
.on("click", function(d, i) {
  update("VIC");
});

d3.select("#NSW")
.on("click", function(d, i) {
  update("NSW");
});

d3.select("Both")
.on("click", function(d, i) {
  update("data");
});

Answer 1

请勿重复使用u v^i w x^i y = a^(m+i)b^(m+i)c^m选择。选择是不可变的，因此，在元素可能发生更改的情况下，您应该始终重新选择。
内部更新方法完全没有dot，因此，如果新数据的大小比以前大，则不会创建新的所需元素。
< / li>
使用enter选择访问数据数组中没有匹配项的旧元素。您可以通过在其上调用.exit()来删除它们

.remove()

var data = [{
  state: 'VIC',
  number: 2
}, {
  state: 'NSW',
  number: 5
}]

var svg = d3.select('#chart').append('svg').attr('width', 300).attr('height', 60);
var x = d3.scalePoint()
  .domain(['VIC', 'NSW'])
  .range([50, 250]);
  
var y = d3.scaleLinear()
  .domain([0, 10])
  .range([10, 50]);

function update(selectedGroup) {

  var updateData = data.filter(function(d) {
    if (selectedGroup === "VIC") {
      return d.state === "VIC"
    } else if (selectedGroup === "NSW") {
      return d.state === "NSW"
    } else {
      return true;
    }
  });
  

  var dot = svg
    .selectAll("circle")
    .data(updateData);
    
  dot.enter()
    .append("circle")
    .attr("cx", function(d) {
      return x(d.state);
    })
    .attr("cy", function(d) {
      return y(d.number);
    })
    .attr("r", 0)
    .style("fill", "blue")
    .merge(dot)
    .transition()
    .duration(1000)
    .attr("r", 5)
    .attr("cx", function(d) {
      return x(d.state)
    })
    .attr("cy", function(d) {
      return y(+d.number)
    });

  dot.exit()
    .transition()
    .attr('r', 0)
    .remove();

}

d3.select("#VIC")
  .on("click", function(d, i) {
    update("VIC");
  });

d3.select("#NSW")
  .on("click", function(d, i) {
    update("NSW");
  });

d3.select("#Both")
  .on("click", function(d, i) {
    update("data");
  });
  
update();

图形更新后删除现有数据点

1 个答案: