1

The following snippet add d3.geo.circle() object as path element in an svg element. The code is:

    var g = svg.append("g");
    var circles = g.selectAll("path.circle");
    var circle = d3.geo.circle();
    circles = circles.data(d3.values(data));
    circles
        .enter()
        .append("path");
        .datum(function(d) {
            return circle
                .origin([d.lon, d.lat])
                .angle(0.2)();
        })
        .attr("class", "circle")
        .attr("d", path);

Now, I want to add say, a mouseOver event on these circles, which will log(prints) latitude-longitude information, I cannot access like:

     g.selectAll('path.circle')
     .on("mouseover", function(d,i) { 
         console.log(d.lat + "-" + d.lon);
     });

I understand that the 'd' represents the d3.geo.circle object, but I could not figure out how to reach the data[i]?

Mohitt
  • 2,957
  • 3
  • 29
  • 52
  • 1
    It looks like you're binding the circle generator as the data to the element. You shouldn't need the additional `.datum()` if you move that part into the definition of `d`. – Lars Kotthoff Feb 25 '15 at 15:36
  • @lars, can you please explain how to move that part into definition of d. I am a bit hazy on this. – Mohitt Feb 25 '15 at 16:40
  • 1
    Isn't this just `circles.enter().append("path").attr("d", function(d,i){ return circle.origin[d.lon, d.lat]).angle(0.2)();});` – Mark Feb 25 '15 at 18:11
  • 1
    @Mark is right -- and then just pass all of that with `d` to `path`. – Lars Kotthoff Feb 25 '15 at 18:31
  • @Mark, I tried this code, but now there are no circles at all. circles .attr("class", "circle") .attr("d", function(d) { return circle .origin([d.lon, d.lat]) .angle(0.2)(); }) .style("fill", "yellow") .on("mouseover", airportMouseOver) .on("mouseout", airportMouseOut); Can you please explain what Lars meant by "pass all of that with d to path"? – Mohitt Feb 26 '15 at 05:27
  • I am not fully thorough with the underlying concept here. Can you please help me understand the solution. – Mohitt Feb 26 '15 at 05:35
  • 1
    finally I looked into the documentation much carefully and tried this and got it worked. Thanks for the help: circles .attr("class", "circle") .attr("d", function(d) { return path(circle .origin([d.lon, d.lat]) .angle(0.2)()); }) .style("fill", "yellow") .on("mouseover", airportMouseOver) .on("mouseout", airportMouseOut); – Mohitt Feb 26 '15 at 05:55

0 Answers0