Как динамически обновить координаты для узлов в D3 forceSimulation? - PullRequest
Новая
       14

Как динамически обновить координаты для узлов в D3 forceSimulation?

0 голосов
/ 20 июня 2019

Я пытаюсь обновить положение узла, основываясь на событии щелчка.

Я вижу, что данные обновляются в консоли, однако координаты x, y не обновляются. Я ожидал, что forceSimulation обновит координаты x, y, как только данные изменятся.

Очевидно, я неправильно понял, как это работает. Но если бы вы могли сказать, где именно я был неправ в своей интуиции, это действительно помогло бы мне. Мой мыслительный процесс состоял в том, что симуляция силы обновит координаты forceX и forceY на основе foci_dict.

В консоли: {имя: "b", возраст: 27, индекс: 0, x: 45.46420808466252, y: 54,94672336907456,…}

Объект обновлен, но координаты не обновлены. 

<html>
      <body>
        <canvas id="bubbles" width="1500" height="500"></canvas>
        <button onClick="changeMe()"> clicck me </button>
      </body>
      <script src="https://d3js.org/d3.v4.min.js"></script>
      <script>
        var height = 500;
        var width = 1500;
        var canvas = d3.select("#bubbles");
        var ctx = canvas.node().getContext("2d");
        var r = 5;

        var data = [
          { name: "a", age: 27 },
          { name: "a", age: 21 },
          { name: "a", age: 37 },
          { name: "b", age: 23 },
          { name: "b", age: 33 },
          { name: "c", age: 23 },
          { name: "d", age: 33 }
        ];

        var foci_points = {
          'a': { x: 50, y: 50 },
          'b': { x: 150, y: 150 },
          'c': { x: 250, y: 250 },
          'd': { x: 350, y: 350 }
        };

        var simulation = d3.forceSimulation()
            .force("x", d3.forceX(function(d){
                return foci_points[d.name].x;
            }))
            .force("y", d3.forceY(function(d){
                return foci_points[d.name].y;
            })
            )
            .force("collide", d3.forceCollide(r+1))
            .force("charge", d3.forceManyBody().strength(10)) 
            .on("tick", update); 


        simulation.nodes(data); 

        function update() {
          ctx.clearRect(0, 0, width, height); 


          ctx.beginPath();
          data.forEach(drawNode);
          ctx.fill();
        } 

        function changeMe(){
            data[0].name="b";
            console.log(data);
        }
        function drawNode(d) {
          ctx.moveTo(d.x, d.y);
          ctx.arc(d.x, d.y, r, 0, 2 * Math.PI);
        } 
        update();


      </script>
    </html>

1 Ответ

1 голос
/ 20 июня 2019

Есть две проблемы, которые вы должны решить:

  1. Силы не будут обновляться автоматически только потому, что базовые данные изменились. Вы должны программно повторно инициализировать силы, вызвав force.initialize(nodes). Учитывая ваш код, это может выглядеть примерно так: 

    simulation.force("x").initialize(data);   // Get the x force and re-initialize.
simulation.force("y").initialize(data);   // Get the y force and re-initialize.

  2. К тому времени, когда вы нажмете кнопку, симуляция будет охлаждена или даже остановлена. Чтобы запустить его снова, вам необходимо разогреть его, установив alpha в значение, большее alphaMin и перезапустив прогон симуляции. 

    simulation.alpha(1).restart();            // Reheat and restart the simulation.

Эти действия лучше всего выполнить в вашей функции changeMe().

Взгляните на следующий фрагмент для демонстрации бега: 

var height = 500;
var width = 1500;
var canvas = d3.select("#bubbles");
var ctx = canvas.node().getContext("2d");
var r = 5;

var data = [{
    name: "a",
    age: 27
  },
  {
    name: "a",
    age: 21
  },
  {
    name: "a",
    age: 37
  },
  {
    name: "b",
    age: 23
  },
  {
    name: "b",
    age: 33
  },
  {
    name: "c",
    age: 23
  },
  {
    name: "d",
    age: 33
  }
];

var foci_points = {
  'a': {
    x: 50,
    y: 50
  },
  'b': {
    x: 150,
    y: 150
  },
  'c': {
    x: 250,
    y: 250
  },
  'd': {
    x: 350,
    y: 350
  }
};

var simulation = d3.forceSimulation()
  .force("x", d3.forceX(function(d) {
    return foci_points[d.name].x;
  }))
  .force("y", d3.forceY(function(d) {
    return foci_points[d.name].y;
  }))
  .force("collide", d3.forceCollide(r + 1))
  .force("charge", d3.forceManyBody().strength(10))
  .on("tick", update);


simulation.nodes(data);

function update() {
  ctx.clearRect(0, 0, width, height);

  ctx.beginPath();
  data.forEach(drawNode);
  ctx.fill();
}

function changeMe() {
  data[0].name = "b";
  simulation.force("x").initialize(data);
  simulation.force("y").initialize(data);
  simulation.alpha(1).restart();
}

function drawNode(d) {
  ctx.moveTo(d.x, d.y);
  ctx.arc(d.x, d.y, r, 0, 2 * Math.PI);
}
update();
<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
  <button onClick="changeMe()"> clicck me </button>
  <canvas id="bubbles" width="1500" height="500"></canvas>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...