javascript - Displaying some text on States on Map using D3.js and GeoJson -
i have been working storm , redis, , visualize data fetching redis, need render map (india) , place data according state. have rendered map correctly have no idea how display text within respective state boundaries. appreciated. thanks.
<!doctype html> <html lang="en"> <head> <title>visualization demo</title> <script type="text/javascript" src="d3.min.js"></script> <script type="text/javascript" src="d3.geo.min.js"></script> <link type="text/css" rel="stylesheet" href="color-scheme.css"/> <style type="text/css"> svg { background: #282828; } body { background: #282828; } h1 { color:#999999; } #india { fill: #99ffcc; opacity: .9; stroke: white; stroke-width: 1.0; } #chart { margin-left:150px; } </style> </head> <body> <h1><center>visualization</center></h1> <div id="chart"></div> <script type="text/javascript"> var w = 1000; var h = 1500; var proj = d3.geo.mercator(); var path = d3.geo.path().projection(proj); var t = proj.translate(); // projection's default translation var s = proj.scale() // projection's default scale var map = d3.select("#chart").append("svg:svg") .attr("width", w) .attr("height", h) .call(initialize); var india = map.append("svg:g") .attr("id", "india"); d3.json("india-states.json", function (json) { india.selectall("path") .data(json.features) .enter().append("path") .attr("d", path); }); function initialize() { proj.scale(9000); proj.translate([-1520, 1000]); } </script> </body> </html>
try this, inside d3.json
function:
india.selectall("text") .data(json.features) .enter() .append("text") .attr("fill", "black") .attr("transform", function(d) { var centroid = path.centroid(d); return "translate(" + centroid[0] + "," + centroid[1] + ")" }) .attr("text-anchor", "middle") .attr("dy", ".35em") .text(function(d) { return d.properties.state_name; });
you don't have properties.state_name
name of states, check in json should use here.
Comments
Post a Comment