How to change node's image by fetching svg-image from web-api.
chanmoto opened this issue · comments
I am still biginner , not clear how to using react component more over this library.
But I believe that vis.js is a good libruary, compare to other network graph library such as cytoscape.js.
Now my challage has been successed when I used cytoscape.js ( import library is "react-cytoscapejs")
version of cytoscape
(This code is carrying successfully.)
Cytoscape.js has a reference end point ( myCyRef for example).
https://github.com/plotly/react-cytoscapejs/blob/master/README.md#reference-props
So I can change object properity directry through it.
( It's very useful whom don't know react comonent inside, like me.)
My desire is a simple, I want to use vis.js library like a non react component sometimes.
( ofcourse my skill will up grade in the future. but now, I need a guide to step up simply.)
let myCyRef = null;
constructor(props) {
super(props);
this.state = {
elements: {},
}
}
componentDidMount() {
const Cross = fetchCrossvalidData();
this.setState({ elements: Cross });
}
componentDidUpdate() {
this.loadSVG();
}
loadSVG() {
this.state.elements.map((value, index, array) => {
const params = { // some querying code was written here // }
const query = new URLSearchParams(params);
fetch(
apiurl+'/svg?'+query.toString()
)
.then(r => r.text())
.then(data => {
if(data.indexOf('<svg')>0) //get some svg data
{
data=data.replaceAll('\\',"").slice(1).slice(0,-1);
myCyRef.filter("node[id='" + value['data'].id + "']").css("background-image", "data:image/svg+xml;utf8," + encodeURIComponent(data));
}
}).catch(err => {
console.log(err);
});
});
}
render() {
if (this.state.elements.length > 0 && this.state.crossvalid.length > 0) {
return (
<CytoscapeComponent cy={(cy) => { myCyRef = cy; }}
stylesheet={styles}
elements={this.state.elements}
style={{ minWidth: "800", minHeight: "800px" }}
layout={layout}
/>
);
} else {
return <div className="App">
Loading...Patent Data</div>
}
}