Search code examples
dictionaryd3.jstopojson

How to render only a part of topojson in d3


I have a topojsonfile which contains all the district in India. I want to render only the districts from specific state. I am unable to figure out how to do that.

Here is my initial code(It renders all districts):

    var district_geo_obj = topojson.feature(district, district.objects.india_district);
    var district_projection = d3.geoMercator()
        .fitSize([width/2, width/2], district_geo_obj);
    var district_path = d3.geoPath().projection(district_projection);

    map_svg.selectAll("path")
        .data(district_geo_obj.features)
        .enter().append("path")
        .attr("d", district_path)
        .attr('class', 'map-margin-const')
        .style('fill', function(d) {
            return 'red';
        })

This is the screnshot of the topojson file

This is the screnshot of the topojson file


Solution

  •   var districts = ["aaa", "bbb", "ccc", "ddd"];
    
      map_svg.selectAll("path")
        .data(district_geo_obj.features)
        .enter().append("path")
        .attr("d", district_path)
        .attr('class', 'map-margin-const')
        .style('fill', function(d) {
            return 'red';
        }).style("stroke-width", function (d, i) {
                        if (districts.indexOf(d["properties"]["NAME_1"]) > -1 ) return "1px";   // Not sure about the syntax. But this should do
                        else return "0px";
                    })