D3.jsとGeoJsonを使用してマップ上の州のテキストを表示

私はStormとRedisと一緒に作業していました。データを視覚化するために、私は地図（インド）をレンダリングし、状態に。私はマップを正しくレンダリングしましたが、それぞれの状態境界内でテキストをどのように表示するのか分かりません。助けていただければ幸いです。ありがとう。D3.jsとGeoJsonを使用してマップ上の州のテキストを表示

<!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(); // the projection's default translation 
     var s = proj.scale() // the 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>

出典

2016-05-09 Vishal

あなたd3.json関数の中で、これを試してみてください：

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; 
    });

をあなたはおそらく、状態の名前としてproperties.STATE_NAMEを持っていないが、単にあなたがここに使うべきか、あなたのJSONでご確認ください。

出典

2016-05-09 12:36:11

したがって、各状態境界内に状態名が表示されますか？ – Vishal

実際には、 'centroid' xとyによって設定された、与えられた点に状態の名前が表示されます。たとえば、大きすぎるフォントサイズを選択した場合、または状態が小さすぎる場合、テキストは境界を通過します。しかし、あなたは状態に応じてフォントサイズを調整したり、位置を少し変えることができます。これは簡単です。ところで、あなたは名前を持つプロパティを見つけましたか？ –

はい、動作します！おかげで、あなたは私に多くの時間を節約しました。説明がわかれば、このコードの説明も必要です – Vishal

D3.jsとGeoJsonを使用してマップ上の州のテキストを表示

答えて

関連する問題