两个D3质心对象之间的D3 LineString

时间:2016-04-26 22:57:54

标签: javascript d3.js d3.geo

我有一堆用州和县的人口普查FIPS代码编码的数据(即纽约是FIPS 36,国王县是FIPS 36047)。我使用来自TopoJSON file here的d3.geo.albersUSA投影来映射该数据,该投影使用FIPS代码作为州和县功能的ID。这对于choropleth很好,我只需要加入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代码和要素质心创建了一个map var,然后使用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]}) })

0 个答案:

没有答案