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

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -