All Nodes Are Overlap together

I use the demo in the document for demo ,but the result is all the nodes and links are overloped ,Is there any adivse for it? here is the code ,Please give me some advise, thanks `import React from ‘react’; import PropTypes from ‘prop-types’; import { request } from ‘…/…/…/globalLib’; import { Graph } from ‘react-d3-graph’;

import ‘./ServiceTypology.scss’;

const myConfig = { nodeHighlightBehavior: true, automaticRearrangeAfterDropNode: true, collapsible: false, directed: true, node: { color: ‘lightgreen’, size: 120, highlightStrokeColor: ‘blue’, }, link: { highlightColor: ‘lightblue’, }, };

const data = { nodes: [ { id: ‘Harry’ }, { id: ‘Sally’ }, { id: ‘Alice’ }, ], links: [ { source: ‘Harry’, target: ‘Sally’ }, { source: ‘Harry’, target: ‘Alice’ }, ], };

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} moved to new position x= ${x} y= ${y}); };

class ServiceTypology extends React.Component { static displayName = ‘ServiceTypology’;

static propTypes = { namespaceId: PropTypes.string, };

constructor(props) { super(props); this.state = { loading: false, }; }

openLoading() { this.setState({ loading: true }); }

closeLoading() { this.setState({ loading: false }); }

render() { const { namespaceId } = this.props; return ( <div className="graph-service-typology"> <Graph id="graph-id" data={data} config={myConfig} onClickGraph={onClickGraph} onClickNode={onClickNode} onDoubleClickNode={onDoubleClickNode} onRightClickNode={onRightClickNode} onClickLink={onClickLink} onRightClickLink={onRightClickLink} onMouseOverNode={onMouseOverNode} onMouseOutNode={onMouseOutNode} onMouseOverLink={onMouseOverLink} onMouseOutLink={onMouseOutLink} /> </div> ); } }

export default ServiceTypology; `

The next is the result :

[danielcaldas]

Oh actually this is expected behavior if you do not provide initial x and y coordinates 😄

From the official docs:

staticGraph (boolean = false) when setting this value to true the graph will be completely static, thus all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be rendered with the initial provided x and y coordinates (links positions will be automatically set from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.

How to provide initial coordinates?

The live demo example does the same thing, source code in Sandbox.jsx:

/**
     * This function decorates nodes and links with positions. The motivation
     * for this function its to set `config.staticGraph` to true on the first render
     * call, and to get nodes and links statically set to their initial positions.
     * @param  {Object} nodes nodes and links with minimalist structure.
     * @return {Object} the graph where now nodes containing (x,y) coords.
     */
    decorateGraphNodesWithInitialPositioning = nodes => {
        return nodes.map(n =>
            Object.assign({}, n, {
                x: n.x || Math.floor(Math.random() * 500),
                y: n.y || Math.floor(Math.random() * 500),
            })
        );
    };

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.