CODEWITHSUNDEEP
javascriptd3.jstopojson
Mohitt
Mohitt

Reputation: 2977

D3 pie chart disapears from map

I started from a sample Map app at: http://bl.ocks.org/d3noob/raw/5193723/

I want to place a custom pie chart, as shown in the fig below. I created one by adding the code snippet just after the creation of circles is done.

Pie-chart Snippet:

        var r=10;
        var p = Math.PI*2;

        var arc = d3.svg.arc()
                .innerRadius(r-3)
                .outerRadius(r)
                .startAngle(0)
                .endAngle(p* d.value1);
        var arc2 = d3.svg.arc()
                .innerRadius(r-7)
                .outerRadius(r-4)
                .startAngle(0)
                .endAngle(p* d.value2);

        g.append("path")
                .attr("d", arc)
                .attr("fill", "red")
                .attr("transform", "translate(400,500)");
        g.append("path")
                .attr("d", arc2)
                .attr("fill", "orange")
                .attr("transform", "translate(400,500)");

It comes out nicely as shown in the pic below near Thailand:enter image description here

Problem

  1. When I zoom or move the map, the pie-chart disappears but the circles remain intact. Can someone help me understand it?
  2. One can notice a very crude way the arcs are plotted. The pie-chart is expected to be plotted for each of the city. I am looking for a cleaner way just like the way circles are drawn.

Upvotes: 0

Views: 250

Answers (1)

meetamit
meetamit

Reputation: 25157

The code that runs when zoom takes place

    g.selectAll("path")  
        .attr("d", path.projection(projection));

is selecting all paths and modifying their "d" attribute. Since it's "generically" just looking for pathss, then it's also grabbing the donut paths you created and modifying them (probably setting them to empty strings or NaNs).

You can fix this either by taking the donuts out of the same g of the geo paths, so that they don't get selected. OR, you can make your "path" selector more specific, by adding some class (e.g. "geo") to all the geo paths and using that class whenever you select them (e.g. g.selectAll("path.geo")).

Upvotes: 1

Related Questions