Ad
How To Fix 'Error: Missing: 0' On D3.forceLink
I created a test case where a react component on mount creates link between two nodes. For some strange reason it throws me error Error: missing: 0
The only case when code is working and actually links the elements is when i use .force('link', d3.forceLink())
which is really strange, no clue where it looks up for the links in this case.
constructor(props) {
super(props);
this.graphRef = React.createRef();
this.state = {
nodes: [{ id: 0, title: 'Valley', type: 'ford' }, { id: 1, title: 'Valley 2', type: 'ford' }],
links: [{ source: 0, target: 1 }],
}; //testing data
this.linkGroup = null;
this.iconGroup = null;
this.nodeGroup = null;
this.textGroup = null;
this.simulation = null;
}
componentDidMount() {
const domNode = this.graphRef.current;
const { links } = this.state;
const { width, height } = domNode.getBoundingClientRect();
const svg = d3.select(domNode);
this.linkGroup = svg.append('g').attr('class', 'links');
this.iconGroup = svg.append('g').attr('class', 'icons');
this.nodeGroup = svg.append('g').attr('class', 'nodes');
this.textGroup = svg.append('g').attr('class', 'texts');
this.simulation = d3.forceSimulation()
.force('charge', d3.forceManyBody().strength(5))
.force('link', d3.forceLink(links))
.force('centerX', d3.forceX(width / 2))
.force('centerY', d3.forceY(height / 2))
.force('collision', d3.forceCollide().radius(25).strength(1));
this.triggerSimulation();
}
EDIT:
The solution that Gerardo Furtado offers is:
.force("link", d3.forceLink(links)
.id(function(d,i) {
return d.id
})
.distance(20)
.strength(1)
)
However for some reason this doesn't work for me. In order to make the code to work for me it should be like this:
.force("link", d3.forceLink()
.id(function(d,i) {
return d.id
})
.distance(20)
.strength(1)
)
I dont have any clue how my code find those links, but somehow it does.
Ad
Answer
I am still not sure why, but it worked with .force('link', d3.forceLink().id(link => link.id))
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad