CODEWITHSUNDEEP
javascriptd3.jstopojson
Aman Gupta
Aman Gupta

Reputation: 577

Drawing states separately with d3 js and country topojson file

I have a topojson which contains state's paths. I want the user to be able to hover over a state and the state to appear in a different svg. So far, I've tried to extract the geometry out of the topojson (d.geometry , d.geometry.coordinates etc) But I'm not able to do it. Maybe I need to draw a polygon out of that, but some states are of type "Polygon" and some of them are of type "MultiPolgyon".

Any ideas/suggestions?

Edit : Here's my code

var svg = d3.select("#india-map")
.append("svg")
.attr("width",width).attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("height", height)

var stateSvg = d3.select("#state-map")
.append("svg")
.append("g")
.attr("height", height)
.attr("width", width);


var g = svg.append("g");

var projection = d3.geo.mercator()
  .center([86, 27])
  .scale(1200);

var path = d3.geo.path().projection(projection);

var pc_geojson = topojson.feature(pc, pc.objects.india_pc_2014);
var st_geojson = topojson.feature(state_json, state_json.objects.india_state_2014);

g.selectAll(".pc")
    .data(pc_geojson.features)
    .enter().append("path")
    .attr("class", "pc")
    .attr("d", path)
    .attr("id", function(d){ return d.properties.Constituency;})
    .attr("fill", "orange")
    .on("click", function(d){
        drawCons(d);
    });

function drawCons(d){
 stateSvg.selectAll(".pc2")
   .data(d)
   .enter().append("path")
   .attr("class","pc2")
   .attr("d", path)
}

Upvotes: 1

Views: 3019

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

.data() expects to be given an array of objects to be matched against the selection. You're passing a single object, so it doesn't work. You can either use .datum(d) or .data([d]) to make it work.

Quick and dirty demo here.

Upvotes: 3

Related Questions