Learning react by coding, here i'm using 'react-zoom-pan-pinch' for mouse scroll wheel, so when i zoomIn using mouse scroll and its scale gets bigger than '1.311' then it should make circle smaller ("10"), here i have created demo of what i want to achieve. https://codesandbox.io/s/react-zoom-pan-pinch-forked-svx5v6?file=/src/index.js
you can check from console when value gets bigger that circle becomes smaller,
but in my real code i'm using 'viewGenerator' (react-d3-graph) and customNode where i have that svg and circle
import { Graph } from "react-d3-graph";
const [circleR, setCircleR] = useState("50");
const zoomChange = (event: any) => {
if (event.state.scale < 1.311) {
setCircleR("50");
}
if (event.state.scale > 1.311) {
setCircleR("10");
}
console.log("event state scale ", event.state.scale);
console.log("event circleR ", circleR);
};
function CustomNode(props) {
return (
<div>
<svg viewBox="-1 -1 2 2">
<circle
cx="0"
cy="0"
r={circleR}
strokeWidth="0.1"
stroke= "black"
fill= "orange"
/>
</svg>
</div>
);
}
const default_config = {
d3_config: {
nodeHighlightBehavior: false,
staticGraphWithDragAndDrop: true,
automaticRearrangeAfterDropNode: false,
d3: { disableLinkForce: true },
height: 512,
// width: 576,
minZoom: 1,
maxZoom: 1,
node: {
color: "lightblue",
size: 500,
highlightStrokeColor: "blue",
fontSize: 20,
highlightFontSize: 22,
labelProperty: (node: default_config) =>
node.name ? node.name : node.id,
viewGenerator: (node) => (
<CustomNode node={node} focusId={null} />
),
}
};
const [config, setConfig] = useState(default_config);
<Graph
config={config.d3_config}
/>
Problem is 'r={circleR}' is just taking default value from state, and its not updating it when i'm zooming in or zooming out.
Inside my 'zoomChange ' function i have two console.logs and i can check that it gives me right values and changes between '10' and '50' (zoomChange function works fine), then what is the reason i'm not getting updated value to 'r={circleR}' ? writing values to it like 'r="50" or r="10"' will work but i want updated values according to setState.
english is not my mother language so could be mistakes !