В d3, как заставить круги становиться ближе и дальше? - PullRequest
Новая
       27

В d3, как заставить круги становиться ближе и дальше?

1 голос
/ 02 апреля 2020

У меня есть вопрос о цикле движения d3.

Я хочу, чтобы сферы сближались, распадались и становились ближе и снова.

Код, который я пробовал, приведен ниже. Круги только сближаются и никогда не рассеиваются и не повторяются. Заранее спасибо. 

var svg = d3.select('body').append('svg')
  .attr('width', 1000)
  .attr('height', 1000)
var up = true;

var nodes = [{name: 's'}, {name: 'i'}, {name: 'l'}, {name: 'a'}, {name: 'b'}];
var width = 400;
var height = 400;
var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(-20))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .on('tick', ticked);

function ticked() {
  var u = d3.select('svg')
    .selectAll('circle')
    .data(nodes)

  simulation.force('charge', d3.forceManyBody()
    .strength(function() {
      let k = 0;
      k++;
      if (k < 100) {
        return k
      }
      if (k > 100) {
        k = k - 1;
        return -1 * k
      }
    }))
  u
    .enter()
    .append('circle')
    .merge(u)
    .attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    })
    .attr('r', 30)
    .style('fill', 'rgb(179, 142, 148)')
    .attr('transform', 'translate(100,500)')

  var v = d3.select('svg')
    .selectAll('text')
    .data(nodes)
  v.enter()
    .append('text')
    .merge(v)
    .text(function(d) {
      return d.name
    })
    .attr('x', function(d) {
      return d.x
    })
    .attr('y', function(d) {
      return d.y
    })
    .style('color', 'red')
    .style('font-size', 10)
    .attr('transform', 'translate(100,500)')

}
...