D3.js Problems Filtering topojson data

Question

I've setup an example to demonstrate the issue's I've encountered:

To be brief, I'm using d3 to render a map of the united states. I'm appending relevant data attributes to handle click events and identify which state was clicked.

On click events the following is preformed:

I'm grabbing the US County topojson file (which contains ALL US Counties).

Removing irrelevant counties from the data and rendering them on the map of the state that was clicked.

I can't seem to figure out what is going on behind the scenes that is causing some of the counties to be drawn while others are ignored.

When I log the data that is returned from the filtered list, I'm displaying the accurate number of counties, but they are only partially drawn on the map. Some states don't return any. Pennsylvania and Texas partially work.

I've checked the data and the comparison operations, but I'm thinking this may have to do with arcs properties being mismatched.

If I utilize the Counties JSON file to render the entire map of the united states they are all present.

If anyone can help shed some light on what might be happening that would be great.

svg {
fill:#cccccc;
height:100%;
width:100%;
}
.subunit{
outline:#000000;
stroke:#FFFFFF;
stroke-width: 1px;
}
.subunit:hover{
	fill:#ffffff;
	stroke:#FFFFFF;
	stroke-width="10";
}

<body>
<script src="http://www.cleanandgreenfuels.org/jquery-1.11.3.min.js"></script>
<script src="http://www.cleanandgreenfuels.org/d3.v3.min.js"></script>
<script src="http://www.cleanandgreenfuels.org/topojson.v1.min.js"></script>
<script>


var width = window.innerWidth;
    height =  window.innerHeight;

var projection = d3.geo.albers()
    .scale(1500)
    .translate([width / 2, height / 2]);

	//d3.geo.transverseMercator()
    //.rotate([77 + 45 / 60, -39 - 20 / 60]);
    //.rotate([77+45/60,-40-10/60])
    //.scale(500)
    //.translate([width / 2, height / 2]);
var path = d3.geo.path()
    .projection(projection);


var svg = d3.select("body").append("svg")
    .attr("width", width+"px")
    .attr("height", height+"px");



d3.json("http://www.cleanandgreenfuels.org/usstates2.json.php", function(error, us, init) {
  //svg.append("path")
    //  .datum(topojson.feature(us, us.objects.counties))
      //.attr("d", path);
	function init(){
		$( document ).ready(function() {
	 
			$('.subunit').on('click',function(){
				var stateid = $(this).attr("data-stateid");
				
				function clearStates(stateid){
				
				
						d3.json("http://www.cleanandgreenfuels.org/uscounties2.json.php", function(error, us) {
							
							
							console.log(us);
							console.log("DATA CLICKED ID "+stateid);
						
							test = jQuery.grep(us.objects.counties.geometries, function(n){
								return (n.properties.stateid == stateid);
							});
							us.objects.counties.geometries = test;
							
								console.log(test.length);
							console.log(us.objects.counties.geometries.length);
							
							var test = topojson.feature(us, us.objects.counties).features;
							
							
							console.log(test);
							console.log(test.length);
							
								 svg.selectAll(".subunit")
									.data(test)
									.enter().append("path")
									.attr("class", function(d) { return "subunit"; })
									.attr("d", path)
									.attr("data-countyid", function(r){ return r.id; });
							
						});
					
					
				}
				
				clearStates(stateid);
			});
			
			
			
	 
		});
	}

 
      
 svg.selectAll(".subunit")
    .data(topojson.feature(us, us.objects.us).features)
  .enter().append("path")
    .attr("class", function(d) { return "subunit"; })
    .attr("d", path)
    .attr("data-stateid", function(r){ return r.id; });
    
    init();
    
      
});






</script>
</body>

I have found this resource bl.ocks.org/mbostock/4108203 which appears to provide a better implementation. Although the easy solution is to better structure the data going in, I'm still curious as to what is going on with the example above. — user2355051

user2355051 user2355051 · Accepted Answer · 2015-05-25T01:22:01

It appears as if I was attempting to utilize some outdated features, using topojson.mesh and .datum() to add the new data has resolved this issue, but has introduced a new error.

Now it appears as if the polygons that are rendered must be in sequence to be drawn properly this way.

I think the data going in should be cleaned up to optimize the way d3 is designed to function, but I'd still like to know more about how it is rendering this information that is obtained from the dataset.

function clearStates(stateid){


                        d3.json("http://www.cleanandgreenfuels.org/uscounties2.json.php", function(error, us) {


                            console.log(us);
                            console.log("DATA CLICKED ID "+stateid);

                            test = jQuery.grep(us.objects.counties.geometries, function(n){
                                return (n.properties.stateid == stateid);
                            });
                            us.objects.counties.geometries = test;

                                console.log(test.length);
                            console.log(us.objects.counties.geometries.length);

                            **var test = topojson.mesh(us, us.objects.counties);**


                            console.log(test);
                            console.log(test.length);

                                 **svg.append("path")
                                    .datum(test)
                                    .attr("class", function(d) { return "subunit"; })
                                    .attr("d", path)
                                    .attr("data-countyid", function(r){ return r.id; });**

                        });


                }

D3.js Problems Filtering topojson data

1 Answers