Исправить положение узла форс-графа с помощью D3. js - PullRequest
Новая
       53

Исправить положение узла форс-графа с помощью D3. js

0 голосов
/ 10 марта 2020

Я использую визуализацию force-graph D3 от https://github.com/vasturiano/force-graph. Похоже, это обеспечивает отличный высокоуровневый API для создания силового ориентированного графа, но мне трудно его настроить, поскольку я новичок в Javascript. 

<script src="//unpkg.com/force-graph"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>

<script>

fetch('data.json').then(res => res.json()).then(data => {
      const Graph = ForceGraph()
      (document.getElementById('graph'))
        .graphData(data)
        .nodeAutoColorBy('group')
        .linkSource('source')
        .linkTarget('target')
})

</script>

Данные JSON выглядят так: 

{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1}
  ],
  "links": [
    {"source": "Napoleon", "target": "Myriel", "value": 1},
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
  ]
}

Я пытаюсь исправить положение определенного узла, например от id = Myriel до x=500, y=500. Согласно документации d3 force , мне нужно указать fx и fy. Как мне получить идентификатор конкретного узла, чтобы установить эти атрибуты? Любая помощь с благодарностью!

Ответы [ 2 ]

2 голосов
/ 11 марта 2020

Я нашел решение: 

.nodeVal(node => {         
  node.fx = 500;
  node.fy = 500
})

Используя метод nodeVal, я могу получить доступ к атрибутам узлов, чтобы исправить это. Добавление оператора if позволило бы мне изменить его только в том случае, если мне нужно указать c узлов. Спасибо всем за помощь!

0 голосов
/ 10 марта 2020

Ссылка на API, которую вы предоставили, действительно красивая. Это такой сложный график, с которым можно работать, и в нем отмечены почти все поля.

Однако, похоже, что единственный способ приспособить его к ВАШИМ потребностям - взломать код js, который я бы не советовал .

Лично я бы начал с более простой версии d3 и настроил ее здесь.

Например: https://observablehq.com/@d3 / Force-Directed-Graph

Здесь вам нужно настроить функцию Simulation.on ("Tick". Что-то вроде это: 

node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    **.attr("fx", d => d.id === "Myrial" ? 500 : null)**
    **.attr("fy", d => d.id === "Myrial" ? 500 : null);**

`

ИЛИ для аналогичного подхода к вашему примеру вы можете использовать Vega. Это позволяет вам использовать fx и fy:

https://vega.github.io/vega/docs/transforms/force/

...