0

I am trying to draw the states of India map (with disputed territories ) by D3 Map. I successfully generate the topojson file which looks good in http://www.mapshaper.org/

And the json link is https://dl.dropboxusercontent.com/s/wk9qd47wn1nhsjm/dddtopo.json

But I failed to draw the map. The link http://jsfiddle.net/sEFjd/47/ is how I did under jsfiddle. 

var topoJsonUrl = "https://dl.dropboxusercontent.com/s/wk9qd47wn1nhsjm/dddtopo.json";



var width = 360,
height = 360;


d3.json(topoJsonUrl, function(error, mx) {

  var projection = d3.geo.mercator();

  // create the path
  var path = d3.geo.path().projection(projection);



var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
console.log(mx);

var geoPaths = svg.append("g")
  .attr("class", "municipalities")
.selectAll("path")
  .data(topojson.feature(mx, mx.objects.india).features);
geoPaths.enter().append("path")
  .attr("d", path);

var p=  svg.append("path")
        .datum(topojson.mesh(mx, mx.objects.india))
        .attr("d", path)
        .attr("class", "state-boundary"); 
geoPaths.style("fill", function(d) { 
    return Math.random() > 0.5 ?'gray' : 'blue'; 
});

});

The code works well with other countries(Germany, Mexico) Not sure why it does not work this time. Any help will be very appreciated.

Willy
  • 1,828
  • 16
  • 41
  • I don't see where `topojson` is initialized: `.selectAll("path") .data(**topojson**.feature(mx, mx.objects.india).features); geoPaths.enter().append("path") .attr("d", path); – adamdc78 Apr 15 '15 at 18:51
  • 2
    You don't seem to be centering the map on India. You could do it manually, or you could do it automatically. Have a look at this [SO post](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object) for a description on how to do that. I've bumped your fiddle to [here](http://jsfiddle.net/4q702zwa/1/) with the centering implemented and also thought [this example](http://phil-pedruco.github.io/examples/indiaCrimes/) might be of interest to you (try clicking on the text in the top left hand corner). – user1614080 Apr 16 '15 at 07:58
  • @user1614080 Thanks a lot. I think I should learn from your example to make the projection correctly. It should be the correct answer. Do you want to "answer the question" and then I can mark it as the answer. – Willy Apr 16 '15 at 13:55

0 Answers0