使用 d3 js 和国家 topojson 文件分别绘制状态
-
21-12-2019 - |
题
我有一个包含状态路径的 topojson 。我希望用户能够将鼠标悬停在某个状态上,并且该状态显示在不同的 svg 中。到目前为止,我尝试从 topojson 中提取几何图形( d.geometry 、 d.geometry.coordinates 等),但我无法做到这一点。也许我需要从中绘制一个多边形,但有些状态的类型为“Polygon”,其中一些状态的类型为“MultiPolgyon”。
有什么想法/建议吗?
编辑 :这是我的代码
var svg = d3.select("#india-map")
.append("svg")
.attr("width",width).attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("height", height)
var stateSvg = d3.select("#state-map")
.append("svg")
.append("g")
.attr("height", height)
.attr("width", width);
var g = svg.append("g");
var projection = d3.geo.mercator()
.center([86, 27])
.scale(1200);
var path = d3.geo.path().projection(projection);
var pc_geojson = topojson.feature(pc, pc.objects.india_pc_2014);
var st_geojson = topojson.feature(state_json, state_json.objects.india_state_2014);
g.selectAll(".pc")
.data(pc_geojson.features)
.enter().append("path")
.attr("class", "pc")
.attr("d", path)
.attr("id", function(d){ return d.properties.Constituency;})
.attr("fill", "orange")
.on("click", function(d){
drawCons(d);
});
function drawCons(d){
stateSvg.selectAll(".pc2")
.data(d)
.enter().append("path")
.attr("class","pc2")
.attr("d", path)
}
解决方案
.data()
期望获得一组与选择相匹配的对象。您传递的是单个对象,因此它不起作用。您可以使用 .datum(d)
或者 .data([d])
使其发挥作用。
快速而肮脏的演示 这里.
不隶属于 StackOverflow