Add Markers and Tooltip to D3.js map "Zoom to Bounding Box"

[David Maman]

So I am using this Zoom To Bounding Box framework on D3.js and I just figured out how to append circles to the map.  However when you click on a state the circle moves out of place and I can't figure out how to move them with the zoom or stay in that specified spot.  I also want to incorporate a tooltip and change the circles to markers(image below).  

Here is my code for appending circles:

    d3.json("city_locations.json", function(new_us_places){

    var my_cords = projection(new_us_places["CA"]["SAN DIEGO"]);

    var my_cords1 = projection(new_us_places["CA"]["SAN FRANCISCO"]);

    var my_cords2 = projection(new_us_places["CA"]["SAN FERNANDO"]);

    var my_cords3 = projection(new_us_places["CA"]["LOS ANGELES"]);

    var r = 5;

    svg.append("circle")

    .attr("cx", my_cords[0])

    .attr("cy",  my_cords[1])

    .attr("r", 5)

    .attr("class", "HighlightCircle")

    .on("click", function(d){alert("text")})

    svg.append("circle")

    .attr("cx", my_cords1[0])

    .attr("cy",  my_cords1[1])

    .attr("r", 5)

    .attr("class", "HighlightCircle")

    .style('fill','red')

    .on("click", function(d){alert("text")})

Here is what it looks like: 

This is what happens when you click a state to zoom: 

I want to make the circle a pin drop marker and show a tool-tip similar to this (and hopefully able to keep that marker in place when click state to zoom): 

[Giuseppe Futia]

Dear David,

you should apply the same zoom/translate transformation of the map

to all the circles of the map.

You can write something like this in function clicked (d):

g.selectAll("circles").transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");

I didn't try the code, but it could work.


Best,

Giuseppe

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[David Maman]

Thanks for the quick response, I just tried it and it seems like its still in the same place.  I put it under the clicked function and tried it after the appending of circles as well... That code seems to make sense to me though not sure why its not working... Do you know how to make those circles markers (from an img file in my server) by any chance?