Я хочу перерисовывать точки каждый раз, когда я нажимаю обновить - PullRequest
Новая
       7

Я хочу перерисовывать точки каждый раз, когда я нажимаю обновить

0 голосов
/ 06 февраля 2019

Прямо сейчас у меня есть пузырьковая диаграмма, которая строит пузырьки в разных точках с разным радиусом.Я хочу иметь возможность нажимать кнопку и заново заполнять диаграмму новыми случайными пузырьками.

Я создал функцию update (), в которой я попытался поместить d3.selectall ("круги").() прежде чем добавлять к нему новые круги.Но это только удаляет круги после того, как я нажимаю на это.

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

}

1 Ответ

0 голосов
/ 07 февраля 2019

Вы на самом деле удаляете пузырь и перерисовываете его.

Вам необходимо обновить график. 

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

...