I am trying to use this 3D gio visualization into my ReactJs application. The code is written in vanilla JavaScript. I have also found wrapper for React and tried it but I am not able to pick the selected country(onCountryPicked()) as it is shown on their demo. That is the main reason I go ahead with the vanilla JavaScript implementation instead of wrapper. However, I find the vanilla JavaScript implementation difficult to integrate with my ReactJs application.
I have looked around to solve the issue but the resources I have found did not help me. The bellow are some of the places I have visited.
- How to use vanilla javascript inside Reactjs component?
- https://reactjs.org/docs/integrating-with-other-libraries.html
helloworld.js
var container = document.getElementById("globalArea");
var controller = new GIO.Controller(container, {
color: {...},
brightness: {...},
});
controller.onCountryPicked(callback);
controller.setInitCountry("FR");
controller.showOutOnly(false);
controller.showInOnly(false);
function callback(selectedCountry) {
$("#countryArea").text(selectedCountry.name + " picked!");
$("#infoBoard").fadeIn(300);
setTimeout(function () {
$("#infoBoard").fadeOut(1000);
}, 3000);
}
axios
.get("./test_data.json")
.then(function (response) {
controller.addData(response.data);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
controller.init();
});
var d3Graphs = {
tiltBtnInterval: -1,
};
function showHud() {
$("#hudButtons").show();
$(".tiltBtn").on("mousedown touchstart", d3Graphs.tiltBtnClick);
$(".tiltBtn").on("mouseup touchend touchcancel", d3Graphs.tiltBtnMouseup);
}
function tiltBtnClick() {
var delta;
if ($(this).hasClass("sideViewBtn")) {
delta = 10;
} else {
delta = -10;
}
d3Graphs.doTilt(delta);
d3Graphs.tiltBtnInterval = setInterval(d3Graphs.doTilt, 50, delta);
}
function doTilt(delta) {
tilt += delta * 0.01;
tilt = constrain(tilt, 0, Math.PI / 2);
camera.position.y = 300 * Math.sin(-tilt);
camera.position.z = 100 + 300 * Math.cos(-tilt);
camera.lookAt(new THREE.Vector3(0, 0, 300));
tiltTarget = undefined;
}
............
home.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/three.min.js"></script>
<script src="./lib/gio.min.js"></script>
<script src="./lib/axios.min.js"></script>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="helloworld.css" />
</head>
<body>
<div class="b">
<div id="infoBoard">
<div id="countryArea"></div>
<div id="explanation">Infos here</div>
</div>
<script src="helloworld.js"></script>
</div>
</body>
</html>
................
Sample.js
export class Sample extends React.Component {
componentDidMount() {
}
render() {
return (
<div className="App">
...
</div>
);
}
}
from How to integrate plain (vanilla) JavaScript inside ReactJS?
No comments:
Post a Comment