Как переставить узлы и перевести их в другие очаги? - PullRequest
Новая
       8

Как переставить узлы и перевести их в другие очаги?

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

Я новичок в D3 и до сих пор в восторге. Я поиграл с многофокусным силовым макетом и получил часть того, что я хочу делать, работая нормально. Что я хотел бы знать, возможно ли изменить положение некоторых узлов?на основе шкалы времени.То, что я имел в виду, это то, что вы видите в данный момент, это 6 (оранжевый), 5 (синий) и 3 (зеленый) узлы в созданной мной скрипке , поэтому я хочу, чтобы они позиционировали себя, переводя друг к другут.е. на второй день данные могут быть 5 (оранжевый), 6 (синий) и 4 (зеленый), это означает, что один оранжевый узел перемещается в зеленый кластер.

var data = [
  {"id": 0, "name": "x", "r":5 },
  {"id": 0, "name": "x", "r":5 },
  {"id": 0, "name": "x", "r":5 },
  {"id": 0, "name": "x", "r":5 },
  {"id": 0, "name": "x", "r":5 },

  {"id": 1, "name": "y", "r":5 },
  {"id": 1, "name": "y", "r":5 },
  {"id": 1, "name": "y", "r":5 },
  {"id": 1, "name": "y", "r":5 },
  {"id": 1, "name": "y", "r":5 },
  {"id": 1, "name": "y", "r":5 },

  {"id": 2, "name": "z", "r":5 },
  {"id": 2, "name": "z", "r":5 },
  {"id": 2, "name": "z", "r":5 },
];

var width = window.innerWidth,
    height = 410;

var fill = d3.scale.category10();

var nodes = [], labels = [],
    foci = [{x: 0, y: 10}, {x: 100, y: 210}, {x: 600, y: 210}];

var svg = d3.select("body").append("svg")
    .attr("width", "100%")
    .attr("height", height)
    //.attr("domflag", '');

var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .charge(-10)
    //.chargeDistance(100)
    .gravity(0.1)
    .friction(0.8)
    .size([width, height])
    .on("tick", tick);

//var node = svg.selectAll("circle");
var node = svg.selectAll("g");

var counter = 0;

function tick(e) {
  var k = .1 * e.alpha;

  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
    o.y += (foci[o.id].y - o.y) * k;
    o.x += (foci[o.id].x - o.x) * k;
  });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

}


var timer = setInterval(function(){

  if (nodes.length > data.length-1) { clearInterval(timer); return;}

  var item = data[counter];
  nodes.push({id: item.id, r: item.r, name: item.name});
  force.start();

  node = node.data(nodes);

  var n = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style('cursor', 'pointer')
      .on('mousedown', function() {
         var sel = d3.select(this);
         //``sel.moveToFront();
      })
      .call(force.drag);

  n.append("circle")
      .attr("r",  function(d) { return d.r; })
      .style("fill", function(d) { return fill(d.id); })

  n.append("text")
      .text(function(d){
          return d.name;
      })
      .style("font-size", function(d) {
          return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 16) + "px"; 
       })
      .attr("dy", ".35em")

  counter++;
}, 100);
node {
    stroke-width: 1.5px;
  }
  .node:hover circle {
    fill: grey !important;
  }
  
  text {
    font: 18px 'Open Sans', sans-serif;;
    text-anchor: middle;
    pointer-events: none;
    fill: white;
  }
  circle {
    fill: #ccc;
    stroke: white ;
    stroke-width: 2px;
  }
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<h2>D3.js Multi-Foci Force layout </h2>

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

...