d3 компоновки силы фиксированных линий связи между узлами

Question

У меня есть кусок кода, чтобы отобразить диаграмму силы, которую можно найти в этой ссылке - https://jsfiddle.net/u49s9sth/3/

В приведенном выше исходных данных случай представлен в виде

var nodes = [{ 
    id: 0, 
    reflexive: false, 
    "x": 169, 
    "y": 110, 
    name: "event" 
    }, { 
    id: 1, 
    reflexive: false, 
    "x": 369, 
    "y": 110, 
    name: "email" 
    }], 
    lastNodeId = 1, 
    links = [{ 
    source: { 
    id: 0, 
    reflexive: false, 
    "x": 169, 
    "y": 110, 
    name: "event" 
    }, 
    target: { 
    id: 1, 
    reflexive: false, 
    "x": 369, 
    "y": 110, 
    name: "email" 
    }, 
    left: false, 
    right: true 
    }]; 

В этом случае связь между узлами уменьшается после отображения меньшего размера. Но с тем же кодом, если я дать исходные данные, как

var nodes = [{ 
    id: 0, 
    reflexive: false, 
    "x": 169, 
    "y": 110, 
    name: "event" 
    }, { 
    id: 1, 
    reflexive: false, 
    "x": 369, 
    "y": 110, 
    name: "email" 
    }], 
    lastNodeId = 1, 
    links = [{ 
    source: nodes[0], 
    target: nodes[1], 
    left: false, 
    right: true 
    }]; 

Это имеет в виде данных из nodes непосредственно будет работать нормально - Вот скрипка для фактического result- https://jsfiddle.net/u49s9sth/4/

Почему это случилось? Как я могу достичь второго результата, предоставив данные напрямую?

Answer 1

В своем первом блоке данных ссылки это на самом деле не ссылки потому что с тем, как вы укажете данные d3 никогда на самом деле это соединить два узла. Затем он заканчивается , ведя себя как узел, подчиняясь силам в макете, и он сжимается от узлов.

Итак, как мы можем заставить себя вести себя как настоящая ссылка? Вы здесь ограничены, и у вас есть два варианта, как предоставить данные . Во-первых, как вы его используете во втором фрагменте, укажите источник и цель как узловые объекты. Второй указывает источник и цель как индексы в массив узлов:

var nodes = [{ 
    id: 0, 
    reflexive: false, 
    "x": 169, 
    "y": 110, 
    name: "event" 
    }, { 
    id: 1, 
    reflexive: false, 
    "x": 369, 
    "y": 110, 
    name: "email" 
    }], 
    lastNodeId = 1, 
    links = [{ 
    source: 0, 
    target: 1, 
    left: false, 
    right: true 
    }];