Question

我有一个包含状态路径的topojson。我希望用户能够将鼠标悬停在状态和状态上以显示在不同的svg中。到目前为止，我已经尝试从topojson中提取几何体（d.geometry，d.geometry.coordinates等）但是我无法做到。也许我需要从中绘制一个多边形，但有些状态属于＆＃34; Polygon＆＃34;其中一些属于＆＃34; MultiPolgyon＆＃34;。

有任何想法/建议吗？

编辑：这是我的代码

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

Answer 1

期望为

.data()提供一个与选择匹配的对象数组。您传递的是单个对象，因此无法正常工作。您可以使用.datum(d)或.data([d])来使其正常工作。

快速而肮脏的演示here。

使用d3 js和country topojson文件分别绘制状态

1 个答案: