3

After spending quite some time on this problem without any success, I decided to post my (first!) question here.

For a project I used topojson to plot part of a map. In my SVG I have some groups containing some points (which I placed using the geojson.io tool).

The map looks like this: plotted map

The structure of the code looks like this:

<svg width='1300' height='900'>
    <g class="gate" id="D5">
        <path d="M645.3426080089994,434.9821086442098m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
    </g>

    <g class='gate' id='d4'>
        <path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
    </g>
</svg>

What I'd like to do is append some SVG based on some condition on the exact location of these points. Now while I know how to append SVG's, I'm having trouble extracting the coordinates of the point on the map. The SVG that I would like to append must be placed upon the points in the map. However, when for example I append a circle to the group, the coordinates that I enter are not considered relative to the point, but rather absolute to the whole SVG area. The circle ends up in the upper left corner instead of on the actual point.

I attempted to extract the coordinates of each point in order to use this data for plotting, but I have not yet succeeded. I managed to get the node by using:

d3.selectAll('#D5').select('path').node()

Which returns:

<path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>

When I look inside the path object, I see that deep inside the __ data__ element there are some coordinates, but I'm not able to extract these.

This issue wouldn't be a problem if I defined the coordinates for the point at start. However, due to the fact that this is topojson, the whole image is just a composition of path elements.

How can I plot a SVG on the points without explicitly defining coordinates beforehand? If any more information is required, please let me know.

Thanks!

1 Answer 1

5

What you are looking for is the getBBox() function

d3.selectAll('#D5').select('path').node().getBBox()
// { x: 640.8425903320312, y: 430.48211669921875, width: 9, height: 9 }

See https://jsfiddle.net/7zahj9gt/

1
  • Wow thank you so much, this is exactly what I was looking for! Jun 23, 2017 at 10:48

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.