javascript - D3 : Circle Points don't update when changing slider

Question

我已经开始尝试学习 D3 只是作为一种爱好，我想创建一种显示“method of exhaustion”的动画。 ' 来近似圆的面积。我希望获得的行为显示在这个 animation 中.

我已经能够画出圆、圆周围的点以及三 Angular 形。现在我正在开发一个名为“更新”的函数，它在监听 HTML 上的 slider 事件时动态更改“n”的值，并使用它重新计算坐标并将它们显示在屏幕上。

我设法能够更改圆圈的填充，但除此之外，更新功能不会更新圆圈的坐标，也不会添加新圆圈。如果有人可以帮助我完成这项工作，并就我的方法失败的原因提供一些见解，我将不胜感激。

var w = 500;
var h = 500;
var n = 17;
var r = h / 2 - 20;
var coords = [];
//var id = 0;

function points() {
  coords = []; //Clear Coords Array

  for (var i = 0; i < n; i++) {
    var p_i = {};
    p_i.x = w / 2 + r * math.cos((2 * math.pi / n) * i);
    p_i.y = h / 2 - r * math.sin((2 * math.pi / n) * i);
    p_i.id = i;
    coords.push(p_i);
  }

  //id++;
};

points(); //Generate Points

var svg = d3.select('body') //SVG Canvas
  .append('svg')
  .attr('width', w)
  .attr('height', h);

var circle = svg.append('circle') //Draw Big Circle
  .attr('cx', w / 2)
  .attr('cy', h / 2)
  .attr('r', r)
  .attr('fill', 'teal')
  .attr('stroke', 'black')
  .attr('stroke-width', w / 100);

var center = svg.append('circle') //Construct Center
  .attr('cx', w / 2)
  .attr('cy', h / 2)
  .attr('r', r / 50)
  .attr('fill', 'red')
  .attr('stroke', 'red')
  .attr('stroke-width', w / 100);

var approx_pts = svg.selectAll('circle_points') //Construct Approx Points
  .data(coords, function(d) {
    return d.id; //Sets Identifier to uniquely identify data. 
  })
  .enter()
  .append('circle')
  .attr('cx', function(d) {
    return d.x;
  })
  .attr('cy', function(d) {
    return d.y;
  })
  .attr('r', w / 100)
  .attr('fill', 'red');

var approx_tri = svg.selectAll('polygon') //Draw Triangles
  .data(coords, function(d) {
    return d.id;
  })
  .enter()
  .append('polygon')
  .attr('points', function(d, i) {
    if (i != n - 1) {
      return w / 2 + ',' + h / 2 + ' ' + d.x + ',' + d.y + ' ' + coords[i + 1].x + ',' + coords[i + 1].y;
    } else {
      return w / 2 + ',' + h / 2 + ' ' + d.x + ',' + d.y + ' ' + coords[0].x + ',' + coords[0].y;
    }
  })
  .attr('fill', 'Transparent')
  .attr('stroke', 'orange')
  .attr('stroke-width', w / 250);

d3.select('#slider') //Listen to Slider Event Change
  .on('input', function() {
    n = +this.value;
    update(n);
  });

function update() {
  console.log('Hey man!');
  points(); // Re-generate points
  console.log('coords[1].x = ' + coords[1].x);
  console.log('coords[1].y = ' + coords[1].y);

  //Make Selection
  approx_pts
    .selectAll('circle')
    .data(coords, function(d) {
      return d.id;
    });

  approx_pts
    .attr('fill', 'blue')
    .attr('r', r / 25);

  approx_pts
    .enter()
    .append('circle')
    .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })
    .attr('r', r / 50)
    .attr('fill', 'green');
};

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.2/math.min.js"></script>
<input id="slider" type="range" min="3" max="100" step="1" value="3">

Answer 1

您缺少正确的“进入”、“更新”和“退出”选择:

var updateSelection = svg.selectAll('.circle_points')
    .data(coords, function(d) {
        return d.id;
    });

var exitSelection = updateSelection.exit().remove();

updateSelection.attr('cx', function(d) {
        return d.x;
    })
    .attr('cy', function(d) {
        return d.y;
    })
    .attr('r', r / 50)
    .attr('fill', 'blue')
    .attr('r', r / 25);

var enterSelection = updateSelection.enter()
    .append('circle')
    .attr('cx', function(d) {
        return d.x;
    })
    .attr('cy', function(d) {
        return d.y;
    })
    .attr('r', r / 50)
    .attr('fill', 'green')
    .attr("class", "circle_points");

这是您的代码，其中包含这些更改:

var w = 500;
var h = 500;
var n = 17;
var r = h / 2 - 20;
var coords = [];
//var id = 0;

function points() {
  coords = []; //Clear Coords Array

  for (var i = 0; i < n; i++) {
    var p_i = {};
    p_i.x = w / 2 + r * math.cos((2 * math.pi / n) * i);
    p_i.y = h / 2 - r * math.sin((2 * math.pi / n) * i);
    p_i.id = i;
    coords.push(p_i);
  }

  //id++;
};

points(); //Generate Points

var svg = d3.select('body') //SVG Canvas
  .append('svg')
  .attr('width', w)
  .attr('height', h);

var circle = svg.append('circle') //Draw Big Circle
  .attr('cx', w / 2)
  .attr('cy', h / 2)
  .attr('r', r)
  .attr('fill', 'teal')
  .attr('stroke', 'black')
  .attr('stroke-width', w / 100);

var center = svg.append('circle') //Construct Center
  .attr('cx', w / 2)
  .attr('cy', h / 2)
  .attr('r', r / 50)
  .attr('fill', 'red')
  .attr('stroke', 'red')
  .attr('stroke-width', w / 100);

var approx_pts = svg.selectAll('circle_points') //Construct Approx Points
  .data(coords, function(d) {
    return d.id; //Sets Identifier to uniquely identify data. 
  })
  .enter()
  .append('circle')
  .attr('cx', function(d) {
    return d.x;
  })
  .attr('cy', function(d) {
    return d.y;
  })
  .attr('r', w / 100)
  .attr('fill', 'red')
  .attr("class", "circle_points");

var approx_tri = svg.selectAll('polygon') //Draw Triangles
  .data(coords, function(d) {
    return d.id;
  })
  .enter()
  .append('polygon')
  .attr('points', function(d, i) {
    if (i != n - 1) {
      return w / 2 + ',' + h / 2 + ' ' + d.x + ',' + d.y + ' ' + coords[i + 1].x + ',' + coords[i + 1].y;
    } else {
      return w / 2 + ',' + h / 2 + ' ' + d.x + ',' + d.y + ' ' + coords[0].x + ',' + coords[0].y;
    }
  })
  .attr('fill', 'Transparent')
  .attr('stroke', 'orange')
  .attr('stroke-width', w / 250);

d3.select('#slider') //Listen to Slider Event Change
  .on('input', function() {
    n = +this.value;
    update(n);
  });

function update() {
  points(); // Re-generate points

  //Make Selection
  var updateSelection = svg.selectAll('.circle_points')
    .data(coords, function(d) {
      return d.id;
    });

  var exitSelection = updateSelection.exit().remove();

  updateSelection.attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })
    .attr('r', r / 50)
    .attr('fill', 'blue')
    .attr('r', r / 25);

  var enterSelection = updateSelection.enter()
    .append('circle')
    .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })
    .attr('r', r / 50)
    .attr('fill', 'green')
    .attr("class", "circle_points");
};

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.2/math.min.js"></script>
<input id="slider" type="range" min="3" max="100" step="1" value="3">