3

州と郡の Census FIPS コードでコード化されたデータがたくさんあります (つまり、ニューヨークは FIPS 36、キングス郡は FIPS 36047 です)。TopoJSON ファイルの d3.geo.albersUSA プロジェクションを使用してそのデータをマッピングしています。ここでは、FIPS コードを州および郡のフィーチャの ID として使用しています。これは、ID で参加する必要があるコロプレスに最適です。

ただし、path.centroid(feature) と LineString パス タイプを使用して、あるフィーチャの重心から別のフィーチャに線を引きたいと考えています。私のデータの簡単な例を次に示します。

Start_State_FIPS, End_State_FIPS, Count_of_things
2,36,3
1,36,13
5,36,5
4,36,8
6,36,13
8,36,3

count_of_things フィールドを使用して半径を設定し、この同じデータを使用してマップ上に円をプロットしています。それは問題なく動作しています。線を設定するために、FIPS コードと地物の重心を使用してマップ変数を作成し、FIPS コード キーを使用してデータから開始点と終了点を取得しました。

私のコードは線を描いていますが、重心点の間ではありません。ポイントの投影は、マップ投影用に既に調整されているフィーチャからのものであるため、ポイントの投影で何もする必要はないと思いましたが、間違っている可能性があります。これが私のコードです：

var arclines = svg.append('g')

data_nested = d3.map(my_data)

var state_points = new Map();

var statesarc = topojson.feature(us, us.objects.states).features

statesarc.forEach(function(d) {
  state_points.set(d.id, path.centroid(d))
})

arcdata = []

data_nested.values().forEach(function(d) {
  arcline = {source: state_points.get(parseInt(d.Start_State_FIPS)), endpoint: state_points.get(parseInt(d.End_State_FIPS))}
  arcdata.push(arcline)
})

arclines.selectAll("path")
    .data(mydata)
  .enter.append("path")
    .attr('d', function(d) { return path({type: "LineString", coordinates: [d.source, d.endpoint]}) })
4

0 に答える 0