Our challenge involves adding tooltips dynamically to a static SVG image when a hover event occurs on an object within the SVG using d3.js in the context of an AngularJS application.
The SVG image we are working with is a floorplan, which is quite intricate. To start off, we have included a small representative snippet of one section:
<g id="f3s362c12">
<g>
<rect x="75.2" y="92.4" pointer-events="visible" fill="none"
width="64.7" height="57.8" />
<polyline fill="none" stroke="#CDDDED" stroke-width="0.5"
stroke-miterlimit="10" points="118.4,149.9 140.3,149.9 140.3,92.4
75.2,92.4 75.2,128.7" />
</g>
<g>
<text transform="matrix(1 0 0 1 87.8719 144.8836)" fill="#010101"
font-family="arial, sans-serif" font-size="13.4182">362.12</text>
</g>
</g>
While D3.js is a new tool for us, our research indicates that it may be the solution we need, as it works well with SVG and can manipulate data within SVG images. However, most examples we found demonstrate dynamically creating SVG (particularly charts) rather than modifying existing SVG images.
In summary, our objectives are:
- Identify g tags starting with "f3", like g id="f3s362c12" above
- Add a tooltip hover event to each associated rect within the g tag
- Retrieve corresponding data records from a .csv file when a user hovers over a specific g tag, such as f3s362c12:
({"floor":"3","location":"f3s362c12","name":"David Byrne","occ":"Singer","img":"img/davidAvatar.jpg\r"})
- Show this information in the tooltip so that hovering over g id=f3s362c12 displays details about David Byrne, including his occupation and avatar image.
We have provided a Plunk demonstration that:
- Loads the SVG in the HTML
- Imports the .csv file
Our current struggle lies in implementing d3.js functionality. For instance, in our Plunk, specifically script.js, we are attempting to locate g tags as follows:
var svg = d3.select("#svgFP");
var allG = svg.selectAll("g").each(function (d,i) {}
At this point, we encounter challenges when trying to access a rect element within allG using the "this" keyword.
if (this.id.indexOf("f3") > -1)
{
//1. Add label/div/hover
//2. Find corresponding record from array object.
//3. Inject respective name, occupation and image into label/div along with mouseover/mouseout event.
}
We have been experimenting with Firebug to identify suitable properties, but the process has proved quite frustrating. We are hopeful that there might be experienced d3.js/angular experts in this community who can offer some guidance.
We appreciate any help in advance.