Hi all I have actually produced a completely interactive SVG graph that has specific courses that are clickable and also revise a div with information based upon the JSON documents I have that matches the id of the course. Presently I am composing this in JQuery however I require to have a feature that will certainly include circles onto the course that is clicked. The circles will independently have their very own id’s and also load that div with information from the item in the JSON that matches the id. I have actually attempted the append technique to add a SVG component to the SVG that is packed right into the file however it appears like that may not be the appropriate method to do it.
This what an area of the SVG appears like prior to clicked
This is what the objective is to appear like after it is clicked
The code I attempted was to include a.append() with a layout actual of the circle SVG code to include in the course that was clicked. The feature would really add and also include in the SVG however it will not provide it. This is an instance of the code I was utilizing
feature addPath( clickedPath) {
$( clickedPath). append( '.
<< circle cx=" 50" cy=" 50" r=" 50"/>>.
').
}
feature svgLoad() {
$(" #SVG"). lots("/ src/test. svg", feature() {
$(" #SVG"). css(" size", "50vw");.
$(" course"). on(" click", feature( evt) {
addPath($( this));.
} ).
}
)}
Is this also feasible with Jquery or would certainly this be much better in something like React?
