Positioning nodes with x and y

I have been using the default example given and was simply playing around with the config.

import React from "react";
import { Graph } from "react-d3-graph";

// graph payload (with minimalist structure)
const data = {
    // nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
    // links: [{ source: "Harry", target: "Sally" }, { source: "Harry", target: "Alice" }],
    nodes : [
      {
          id: 1,
          name: "A",
          x: 50,
          y: 300,
      },
      {
          id: 2,
          name: "B",
          x: 40,
          y: 310,
      },
      {
          id: 3,
          name: "C",
          x: 40,
          y: 310,
      },
      {
          id: 4,
          name: "D",
          x: 400,
          y: 200,
      },
  ],
    links: [
      {
          source: 1,
          target: 2,
          //label: "A-B",
      },
      {
          source: 1,
          target: 3,
          //label: "A-C",
      },
      {
          source: 2,
          target: 4,
          //label: "A-D",
      },
  ],
};

// the graph configuration, you only need to pass down properties
// that you want to override, otherwise default ones will be used
const myConfig = {
    // nodeHighlightBehavior: true,
    // node: {
    //     color: "lightgreen",
    //     size: 120,
    //     highlightStrokeColor: "blue",
    // },
    // link: {
    //     highlightColor: "lightblue",
    // },
    height: 1200,
    width: 1200,
    nodeHighlightBehavior: true,
    linkHighlightBehavior: true,
    staticGraphWithDragAndDrop: true,
    node: {
        fontSize: 12,
        highlightFontSize: 12,
        highlightFontWeight: "bold",
        highlightStrokeColor: "blue",
        labelProperty: "name",
        size: 500,
        strokeWidth: 2,
    },
    link: {
        highlightColor: "blue",
        renderLabel: true,
        highlightFontWeight: "bold",
        semanticStrokeWidth: true,
        fontSize: 12,
    },
    d3: {
        gravity: -400,
        linkLength: 180,
    },
};

// graph event callbacks
const onClickGraph = function() {
    window.alert(`Clicked the graph background`);
};

const onClickNode = function(nodeId) {
    window.alert(`Clicked node ${nodeId}`);
};

// const onDoubleClickNode = function(nodeId) {
//     window.alert(`Double clicked node ${nodeId}`);
// };

const onRightClickNode = function(event, nodeId) {
    window.alert(`Right clicked node ${nodeId}`);
};

const onMouseOverNode = function(nodeId) {
    // window.alert(`Mouse over node ${nodeId}`);
};

const onMouseOutNode = function(nodeId) {
    // window.alert(`Mouse out node ${nodeId}`);
};

const onClickLink = function(source, target) {
    window.alert(`Clicked link between ${source} and ${target}`);
};

const onRightClickLink = function(event, source, target) {
    window.alert(`Right clicked link between ${source} and ${target}`);
};

const onMouseOverLink = function(source, target) {
    // window.alert(`Mouse over in link between ${source} and ${target}`);
};

const onMouseOutLink = function(source, target) {
    // window.alert(`Mouse out link between ${source} and ${target}`);
};

const onNodePositionChange = function(nodeId, x, y) {
    window.alert(`Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}`);
};

function App() {
  return (<Graph
    id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
    data={data}
    config={myConfig}
    onClickNode={onClickNode}
    onRightClickNode={onRightClickNode}
    onClickGraph={onClickGraph}
    onClickLink={onClickLink}
    onRightClickLink={onRightClickLink}
    onMouseOverNode={onMouseOverNode}
    onMouseOutNode={onMouseOutNode}
    onMouseOverLink={onMouseOverLink}
    onMouseOutLink={onMouseOutLink}
    onNodePositionChange={onNodePositionChange}
/>)
}

export default App;

Each time I run this code, even when the coordinates have been hardcoded, I get new positions. Why is that so since they should now be fixed. I would like to simply create a tree structure with siblings getting equally spaced, how do I calculate these coordinates. Could you please explain?

[danielcaldas]

Hi @ASchwad, you would have to compute yourself the x,y coordinates to fulfill your distancing requirements.

[antoninklopp]

Sure I will do a PR for this one !