-
Notifications
You must be signed in to change notification settings - Fork 233
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add x,y to onClickGraph callback #408
Comments
Could I double-check with you if this is the functionality you're looking for? In order to provide |
Hi @danielcaldas, It's not exactly what I'm looking for. I'm able to create the nodes at a given x,y coordinate but I'm unable to get the coordinates when the user clicks on the graph. |
Hmmm... @Taresin still looks like something you should be able to achieve on your own without react-d3-graph. Look at my example, maybe it clears the ideas for you. Quick & dirty implementationimport React, { useState } from "react";
import "./styles.css";
import { Graph } from "react-d3-graph";
export default function App() {
// graph payload (with minimalist structure)
const [data, setData] = useState({
nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
links: [
{ source: "Harry", target: "Sally" },
{ source: "Harry", target: "Alice" }
]
});
// the graph configuration, just override the ones you need
const myConfig = {
nodeHighlightBehavior: true,
freezeAllDragEvents: true,
node: {
color: "lightgreen",
size: 120,
highlightStrokeColor: "blue"
},
link: {
highlightColor: "lightblue"
}
};
const onClickNode = function (nodeId) {
window.alert(`Clicked node ${nodeId}`);
};
document.addEventListener("click", (event) => {
console.log(event);
const { clientX, clientY } = event;
const newNode = {
id: `${Date.now()}`,
x: clientX,
y: clientY
};
setData({
...data,
nodes: [...data.nodes, newNode]
});
});
return (
<Graph
id="graph-id" // id is mandatory
data={data}
config={myConfig}
onClickNode={onClickNode}
/>
);
} |
But when the canvas is moved or scaled the nodes will not appear in the exact canvas position, we need to shift and rescale according to the translation. The way I found to access the translation values from the event is quite messy so maybe a feature should be added. Nevertheless, this is what I think you are looking for:
|
Is your feature request related to a problem? Please describe.
No.
Describe the solution you'd like
I would like x and y coordinates to be passed in to the callback
Describe your use case
I would like to create a new node at a specific user-defined point on the canvas.
It is much easier to do this graphically by clicking instead of adding a node, adding it randomly on the page and dragging it to my desired position.
Describe alternatives you've considered
I've been adding nodes with the interaction as above.
Additional context
I'm not super familiar with the codebase but I've checked the
SyntheticBaseEvent
that is returned by theonClickGraph
function and couldn't find numbers that resembled the coords that I need.The text was updated successfully, but these errors were encountered: