Question

现在我有一个气泡图，可以绘制半径不同的不同点的气泡。我希望能够单击一个按钮，然后使用新的随机气泡重新填充图表。

我创建了一个函数update（），在此之前我尝试将d3.selectall（“ circles”）。remove（）附加到其上。但是，只有在我单击它之后，它才会删除圈子。

<body>
<button class="btn" onclick="update()">Update</button>
<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>


var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var r = d3.scaleLinear().range([10, 50]);


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

var getdata = function() {
var dataset = []
for (var i = 0; i < 20; i++) {
var x = d3.randomUniform(-50,50)();
var y = d3.randomUniform(-50,50)();
var r = d3.randomUniform(-50,50)();
dataset.push({"x": x, "y": y,"r":r});
}
  return dataset
}


var data = getdata()

data.forEach(function(d) {
  d.x = +d.x;
  d.y = +d.y;
  d.r = +d.r;
});


  x.domain([-50, 50]);
  y.domain([-50, 50]);
  r.domain([-50, 50]);




  svg.selectAll("dot")

    .data(data)
    .enter().append("circle")
    .attr("r", function(d) { return r(d.r); })
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .style("stroke", "black")   
    .style("fill", "none")


  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));


  svg.append("g")
    .call(d3.axisLeft(y));

  function update(){
    d3.selectAll("circle").remove()

     svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", function(d) { return r(d.r); })
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .style("stroke", "black")   
    .style("fill", "none")

}

Answer 1

您实际上是删除气泡并重画气泡。

您需要更新图表。

function update(){
    d3.selectAll("circle").remove()
    svg.selectAll("dot")
       .data(getdata())
       .enter().append("circle")
       .attr("r", function(d) { return r(d.r); })
       .attr("cx", function(d) { return x(d.x); })
       .attr("cy", function(d) { return y(d.y); })
       .style("stroke", "black")   
       .style("fill", "none")
}

我刚刚将.data(data)替换为.data(getdata())

我想在每次单击更新时重画点

1 个答案: